Intro to grunt
Transcript of Intro to grunt
Intro to Grunt
1
2
A JavaScript Tasks Runner
Uglify JS/CSS
Compile Jade/SASS/Coffeescript
HTML hint
A lot more to explore…
CSS sprite
Intro to Grunt
Install
$ sudo npm install -g grunt-cli
(1)Based on NodeJS
$ grunt - - version
3
“cli” stands for “Command Line Interface”
(2)Depended on 2 Files
1. package.json
$ npm install
4
2. gruntfile.js
(2)Depend on 2 Files
5
Thanks!
That’s all!
6
Demo
7
practice makes perfect!
Demo 1: Uglify JS
package.json
$ npm install
OR
$ npm install grunt-contrib-uglify - -save-dev
8
gruntfile.js
dest src(array)
Demo 1: Uglify JS
9
:
OR
$ grunt uglify
gruntfile.js
$ grunt default
Demo 1: Uglify JS
10
$ grunt
Use ‘Watch’!!!
12
Demo 2: Adding watch
package.json
$ npm install
OR
$ npm install grunt-contrib-watch - -save-dev
13
gruntfile.js
Srctasks
$ grunt watch
Demo 2: Adding watch
Let’s watch it!
14
Use matchdep!!!
15
Demo 3: add matchdep
package.json
$ npm install
OR
$ npm install matchdep - -save-dev
16
gruntfile.js
Demo 3: add matchdep
17
Demo 3: add matchdep
18
load-grunt-tasks
Demo 3: compile coffee
package.json
$ npm install
OR
$ npm install grunt-contrib-coffee - -save-dev
19
Demo 3: compile coffee
gruntfile.js
dest: src
Srctasks
Let’s watch it!
20
$ grunt watch
21
CoffeeScript
JavaScript
uglified JS
in one step!
22
Demo 4: compile coffee to uglified
gruntfile.js
Custom task name hereLet’s watch it!
$ grunt watch
23
main.js
24
Demo 4: compile coffee to uglified
Demo 5: compile sass
package.json
$ npm install
OR
$ npm install grunt-contrib-sass - -save-dev
$ npm install grunt-contrib-cssmin - -save-dev
25
gruntfile.js
dest: src
Demo 5: compile sass
26
$ grunt watch
Demo 5: compile sass
Let’s watch it!
27
is also called “multi tasks”
Demo 5: compile sass
28
29
Configuring Tasks: tasks
$ grunt uglify
$ grunt coffee
Tasks
30
Configuring Tasks: targets
targets
tasks
$ grunt sass:dist
$ grunt sass:build
$ grunt sass
31
Configuring Tasks: options
options
tasks
32
Configuring Tasks: files
Compact Format
33
files object Format
Configuring Tasks: files
34
files array Format
Configuring Tasks: files
35
Configuring Tasks:
36
custom filter function
fs.Stats method name
Configuring Tasks: templates
37
38
practice makes perfect!
Demo
gruntfile.js
Templates Demo: Uglify JS
39
http://gruntjs.com/plugins
http://gruntjs.com/
Resources
40
http://compass-style.org
http://coffeescript.org
http://jade-lang.com
http://sass-lang.com
http://gulpjs.com/
Thanks Again!
41