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

11

WTF?!

http://gruntjs.com

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