preprocessor workflow with grunt
DESCRIPTION
Preprocessor Workflow with GruntTRANSCRIPT
![Page 1: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/1.jpg)
Preprocessor Workflow with Grunt
CSS Dev Conference 2013 / Vlad Filippov
![Page 2: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/2.jpg)
@vladikoff
![Page 3: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/3.jpg)
Agenda
• Grunt - What and Why?
• Getting Started
• Grunt Plugins and CSS Workflows
• Beyond the plugins
+
![Page 4: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/4.jpg)
What is Grunt?
Task Runner
open browser
minify CSS
processSASS
optimizeimages
run tests
. . .
![Page 5: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/5.jpg)
What is Grunt?
Automationopen
browser
minify CSS
processLESS
optimizeimages →
→
→{→
![Page 6: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/6.jpg)
What is Grunt?
Build Step
→→→→
Debug
→Source Production
Development
![Page 7: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/7.jpg)
What is Grunt?
• Built and Configured using JavaScript
• Powered by
• Cross-platform
• Strength in community & open-source
• Strength in modularity
![Page 8: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/8.jpg)
Who uses Grunt?
![Page 9: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/9.jpg)
npm-stat.vorb.de/charts.html?package=grunt
![Page 10: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/10.jpg)
Grunt Ecosystem
• Stable Version: 0.4.1
• 0.4.2 out in the next few days!
• Over 1000 plugins available today
![Page 11: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/11.jpg)
Demo
![Page 12: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/12.jpg)
Getting Started
![Page 13: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/13.jpg)
Empty Gruntfile
![Page 14: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/14.jpg)
Grunt Plugins!
![Page 15: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/15.jpg)
Grunt Plugins!
Grunt Plugins and Grunt Core in node_modules
Install the plugin we want:
![Page 16: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/16.jpg)
Make it easy to install
$ npm install grunt-contrib-less --save-dev
![Page 17: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/17.jpg)
Make it easy to install
Ready to be installed everywhere!
![Page 18: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/18.jpg)
grunt-contrib-less
![Page 19: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/19.jpg)
grunt-contrib-stylus
![Page 20: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/20.jpg)
grunt-contrib-sass
![Page 21: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/21.jpg)
grunt-contrib-compass
![Page 22: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/22.jpg)
File Patterns
![Page 23: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/23.jpg)
Run it!
![Page 24: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/24.jpg)
So far...
→ SASS:dev
SASS:prod→
![Page 25: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/25.jpg)
grunt-contrib-watch
![Page 26: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/26.jpg)
grunt-contrib-watch
![Page 27: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/27.jpg)
Workflow!
→ SASS:dev
SASS:prod→
watchfor
changes
default
development →
![Page 28: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/28.jpg)
grunt-spritesmith
![Page 29: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/29.jpg)
grunt-contrib-imagemin
![Page 30: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/30.jpg)
build
Workflow Updated!
→ SASS:dev
SASS:prod→
watchfor
changes
default
dev →
createsprites→build optimize
images →
→
build →
![Page 31: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/31.jpg)
Workflow Updated!
![Page 32: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/32.jpg)
grunt-source
Reuse a Grunt environment across multiple projects
Project A Project B Project C
Boilerplate Project
![Page 33: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/33.jpg)
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
![Page 34: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/34.jpg)
Beyond the plugins
![Page 35: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/35.jpg)
Beyond the plugins
![Page 36: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/36.jpg)
Beyond the plugins
![Page 37: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/37.jpg)
Beyond the plugins
![Page 38: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/38.jpg)
![Page 39: Preprocessor Workflow with Grunt](https://reader031.vdocuments.site/reader031/viewer/2022020110/54c783014a7959c6148b4671/html5/thumbnails/39.jpg)
Thank you!
• Documentation and API at gruntjs.com
• Stackoverflow: [gruntjs]
• IRC: #grunt on Freenode
• Twitter: @gruntjs and #gruntjs