let grunt do the work, focus on the fun!

Let Grunt do the work, focus on the fun!

Dirk Ginader, Google, 2013

1

Let Grunt do the endlessly repetitive tedious tasks, focus

on the important stuff!Dirk Ginader, Google, 2013

2

Let Grunt do the work, focus on the fun!

Dirk Ginader, Google, 2013

3

Why Build scripts?

4

Because great Developers

are lazy.

5

Because great Developers

are lazy. FACT.

6

timespent

task sizenon-geekgeek does it manually

makes fun of geek’scomplicated method

loses

does it manually

gets annoyed

writes scriptto automate

runs script

wins

7

Build systems have been around for ages

• Make

• Maven

• and so many more ...

• Ant

• Rake

8

They’re all great and powerful and all...

9

Minify with Ant<target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo></target>

http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

10



How much I liked to configure with XML?

12

I’m a Front End Developer!

14

I like Javascript

15

I like LOVE Javascript

16

Just one year ago Ben Alman did me a

great favor:

18

GRUNTThe JavaScript Task Runner

19

written in Javascript

21

using the node package manager

22

FAST adoption rate• jQuery

• Modernizr

• Adobe

• twitter

• ...

23

because it’s easy!

24

System Setup:

25

download and install node.js from:

http://nodejs.org/

26

http://nodejs.org/

http://nodejs.org/

$ npm install -g grunt-cli

27

Project Setup:

28

2 important Files:package.jsonGruntfile.js

29

package.json

30

{ "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": {

}}

https://npmjs.org/doc/json.html

31



Gives you:

• Variables you can use in your scripti.e. version and name

• Dev Dependencies that allows you to quickly install all required npm modules

32

{ "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": {

}}


33



$ npm install grunt --save-dev

34

{ "name": "jQuery-Accessible-Tabs", "version": "1.9.7", "homepage": "http://github.com/ginader/Accessible-Tabs", "author": { "name": "Dirk Ginader", "url": "http://ginader.com" }, "devDependencies": { "grunt": "~0.4.0" }}


35



$ npm install

install all the defined Dependencies in one go

36

Gruntfile.js

37

Minify with Grunt


module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: 'dist/myfile.js', dest: 'dist/myfile.min.js' }, } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']);};

38



Minify with Ant<target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo></target>


39



Minify with Grunt


module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: 'dist/myfile.js', dest: 'dist/myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']);};

41



Minify with Grunt



42



Minify with Grunt



43



easy to add more$ npm i grunt-contrib-jshint --save-dev

45

add JS Lintingmodule.exports = function(grunt) { grunt.initConfig({ jshint: { all: ['*.js'] }, uglify: { dist: { src: 'myfile.js', dest: 'myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint','uglify']);};

46

add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { all: ['*.js'] }, uglify: { options: { banner: '/*! <%= pkg.name %>' + ' <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { src: 'myfile.js', dest: 'myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint','uglify']);};

47

add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { all: ['*.js'] }, uglify: { options: { banner: '/*! <%= pkg.name %>' + ' <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { src: '<%= pkg.name %>.js', dest: '<%= pkg.name %>.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint','uglify']);};

48

add data from package.jsonmodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { all: ['*.js'] }, uglify: { options: { banner: '/*! <%= pkg.name %>' + ' <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { src: '<%= pkg.name %>.js', dest: '<%= pkg.name %>.<%= pkg.version %>.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint','uglify']);};

49

minify and combine CSS

cssmin: { compress: { options: { banner: '<%= banner %>' }, files: { 'project.min.css': ['1.css','2.css', '...'] } } }

grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.registerTask('default', ['jshint','uglify', 'cssmin']);

50

optimize Imagesimagemin: { dist: { options: { optimizationLevel: 3 }, files: { // 'destination': 'source' 'dist/img.png': 'src/img.png', 'dist/img.jpg': 'src/img.jpg' } }}

grunt.registerTask('default', ['imagemin']);

51

but it’s more than just optimizations

52

render markdown to HTML

markdown: { all: { files: ['readme.markdown','version-history.markdown'], template: 'web/template.html', dest: 'web', options: { gfm: true, codeLines: { before: '<span>', after: '</span>' } } } }

53

remove debug code

removelogging: { dist: { src: 'js/jquery.tabs.min.js', dest: 'js/jquery.tabs.min.js' } }

54

compile Sass/Compass // setup Compass/Sass to load from existing config.rb compass: { dist: { options: { config: 'config.rb' } } }

55

and Livereload!

56

Scaffolding

57

$ npm install -g grunt-init

58

many templates for grunt-init

• Gruntfile

• Grunt plugin

• jQuery plugin

• node.js

• ...

59

$ git clone git://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

60

$ grunt-init jquery

61

The opinions I expressed here represent my own and not necessarily those of my employer.

btw: We’re hiring! Talk to me :-)

Thank you! Questions?

63

Resources

• Grunt: http://gruntjs.com/

• Great article: http://dir.kg/grunt.workflow

• Extending Grunt big time: http://yeoman.io

• Me: http://dir.kg/me

• @ginader on twitter

• the example projects: http://github.com/ginader/

• http://ginader.com

64

http://gruntjs.com/

http://gruntjs.com/

http://dir.kg/grunt.workflow

http://dir.kg/grunt.workflow

http://yeoman.io/

http://yeoman.io/

http://dir.kg/me

http://dir.kg/me

http://twitter.com/ginader/

http://twitter.com/ginader/

http://github.com/ginader/

http://github.com/ginader/

http://ginader.com

http://ginader.com

let grunt do the work, focus on the fun!

Technology

jshint grunt

g gruntcli

js lintingmodule

dirk ginader

antcompiling js files

compiling js fileshttp

important files

required npm modules