Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Preprocessor Workflow with Grunt

vladikoff
October 19, 2013

CSS Preprocessor Workflow with Grunt

CSS Preprocessor Workflow with Grunt

vladikoff

October 19, 2013
Tweet

More Decks by vladikoff

Other Decks in Technology

Transcript

  1. Agenda • Grunt - What and Why? • Getting Started

    • Grunt Plugins and CSS Workflows • Beyond the plugins +
  2. What is Grunt? Task Runner open browser minify CSS process

    SASS optimize images run tests . . .
  3. What is Grunt? Build Step → → → → Debug

    → Source Production Development
  4. What is Grunt? • Built and Configured using JavaScript •

    Powered by • Cross-platform • Strength in community & open-source • Strength in modularity
  5. Grunt Ecosystem • Stable Version: 0.4.1 • 0.4.2 out in

    the next few days! • Over 1000 plugins available today
  6. build Workflow Updated! → SASS: dev SASS: prod → watch

    for changes default dev → create sprites → build optimize images → → build →
  7. So much to do... • Explore task combinations, optimize •

    Give feedback to existing plugins • Share your workflow • Build your own plugins • Plugin Template: github.com/gruntjs/grunt-init
  8. Thank you! • Documentation and API at gruntjs.com • Stackoverflow:

    [gruntjs] • IRC: #grunt on Freenode • Twitter: @gruntjs and #gruntjs