Grunt your way to Glory : LDNJS - 15th July 2013

Grunt your way to glory talk from LondonJS meetup

Transcript

1. Grunt your way to Glory Shaun Dunne - @shaundunne - about.me/shaundunne #LDNJS // 15-07-2013 Tuesday, 16 July 13
2. WHAT IS GRUNT ? A JAVASCRIPT TASK RUNNER Tuesday, 16 July 13
3. WHAT IS GRUNT ? Tuesday, 16 July 13
4. WHAT IS GRUNT ? MAKE RAKE CAKE JAKE Tuesday, 16 July 13
5. WHAT IS GRUNT ? MAKE RAKE CAKE JAKE Tuesday, 16 July 13
6. WHAT IS GRUNT ? MAKE RAKE CAKE JAKE Tuesday, 16 July 13
7. <target name="jshint"> <apply dir="${dir.source}/${dir.js}" executable="java" parallel="false" failonerror="true"> <fileset dir="./${dir.source}/"> <include name="**/${dir.js}/*.js"/> <exclude name="**/*.min.js"/> <exclude name="${dir.intermediate}/**/*.js"/> <exclude name="**/${dir.js.libs}/"/> <exclude name="**/${dir.publish}/"/> </fileset> <arg value="-jar" /> <arg path="./${dir.build.tools}/${tool.rhino}" /> <arg path="./${dir.build.tools}/${tool.jshint}" /> <srcfile/> <arg value="${tool.jshint.opts}" /> </apply> <echo>JSHint Successful</echo> </target> WHAT IS GRUNT ? Tuesday, 16 July 13
8. WHAT IS GRUNT ? Tuesday, 16 July 13
9. Getting GUI } CODEKIT PREPROS LIVERELOAD HAMMER £17 £15 £7 FREE Tuesday, 16 July 13
10. WHAT IS GRUNT ? module.exports = function(grunt) { grunt.initConfig({ jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'assets/js/*.js', '!**/*.min.js', '!assets/libs/*.js' ] } }); grunt.loadNpmTasks('grunt-contrib-jshint') grunt.registerTask('default', ['jshint']); }; Tuesday, 16 July 13
11. WHAT IS GRUNT ? module.exports = function(grunt) { grunt.initConfig({ jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'assets/js/*.js', '!**/*.min.js', '!assets/libs/*.js' ] } }); grunt.loadNpmTasks('grunt-contrib-jshint') grunt.registerTask('default', ['jshint']); }; Tuesday, 16 July 13
12. WHAT IS GRUNT ? Tuesday, 16 July 13
13. WHO USES GRUNT ? HTML5 ˒ BOILERPLATE Tuesday, 16 July 13
14. INSTALL & START USING GRUNT npm install -g grunt-cli + TWO FILES package.json Gruntfile.js Tuesday, 16 July 13
15. package.json { "name": "project-x", "version": "0.0.1", "devDependencies": { } } npm install grunt --save-dev { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0” } } Tuesday, 16 July 13
16. package.json npm install grunt-contrib-jshint --save-dev { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3" } } npm install Tuesday, 16 July 13
17. PICARD QUICK TIP #1 : SHELL FUNCTIONS .bashrc function gi() { npm install --save-dev grunt-"$@" } function gci() { npm install --save-dev grunt-contrib-"$@" } Tuesday, 16 July 13
18. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); Tuesday, 16 July 13
19. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); Tuesday, 16 July 13
20. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); Tuesday, 16 July 13
21. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } Tuesday, 16 July 13
22. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } { "browser": true, "camelcase": true, "curly": true, "eqeqeq": true, "immed": true, "indent": 4, "regexp": true, "undef": true, "unused": true, "strict": true, "trailing": true, "smarttabs": true } all: [ ! 'assets/javascripts/*.js', ! '!assets/javascripts/libs/*', ! '!assets/javascripts/**/*.min.js' ] Tuesday, 16 July 13
23. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] Tuesday, 16 July 13
24. Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] Name of task Tasks to run Tuesday, 16 July 13
25. Tasks ++ { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3", “grunt-contrib-uglify”: “~0.1.2” } } gci uglify Tuesday, 16 July 13
26. Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify'); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }, Tuesday, 16 July 13
27. PICARD QUICK TIP #2 : MATCHDEP npm install matchdep --save-dev require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); Tuesday, 16 July 13
28. Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); , ['jshint', 'uglify'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } require('matchdep').filterDev('grunt- *').forEach(grunt.loadNpmTasks); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }, Tuesday, 16 July 13
29. PICARD QUICK TIP #3: USEMIN npm install grunt-usemin --save-dev <!-- build:js assets/scripts/main.js --> <script src="assets/scripts/libs/jquery-2.0.0.min.js"></script> <script src="assets/scripts/enterprise.jquery.js"></script> <script src="assets/scripts/data.js"></script> <script src="assets/scripts/main.js"></script> <!-- endbuild --> Tuesday, 16 July 13
30. PICARD QUICK TIP #3: USEMIN <!-- build:js assets/scripts/ main.js --> <script src="assets/scripts/ libs/jquery-2.0.0.min.js"></ script> <script src="assets/scripts/ enterprise.jquery.js"></script> <script src="assets/scripts/ data.js"></script> <script src="assets/scripts/ main.js"></script> <!-- endbuild --> useminPrepare: { html: 'app/index.html', options: { dest: 'build' } }, usemin: { html: ['build/**/*.html'], css: ['build/**/*.css'] } grunt.registerTask('default', ['useminPrepare','concat','cssmin','uglify','usemin']) Tuesday, 16 July 13
31. non default Tasks grunt.registerTask('default' ); , ['jshint', 'uglify'] require('matchdep').filterDev('grunt- *').forEach(grunt.loadNpmTasks); gci imagemin Tuesday, 16 July 13
32. non default Tasks } grunt.registerTask('default' ); , ['jshint', 'uglify'] require('matchdep').filterDev('grunt- *').forEach(grunt.loadNpmTasks); grunt.registerTask('imgmin', ['imagemin']); grunt imgmin Tuesday, 16 July 13
33. MOAR? } Tuesday, 16 July 13
34. back to package.json } grunt.initConfig({ ! ! pkg: grunt.file.readJSON("package.json"), //other stuff }) Update once version control files: { "build/project-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] }, Tuesday, 16 July 13
35. back to package.json } files: { "build/<% pkg.name %>-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] } Tuesday, 16 July 13
36. banners } options: { banner:"/*! <% pkg.name %> v<%= pkg.version %> | " + ! ! "<%= grunt.template.today(“yyyy-mm-dd”) %> | " + ! ! ! "*/" } Tuesday, 16 July 13
37. } WESLEY CRUSHER SAYS USE BETTER BANNERS asciify: { myBanner: { text: 'Grunt Asciify!' } } Tuesday, 16 July 13
38. Sassy goodness } sass: { dist: { options: { compass:true, style: 'compressed' ! }, ! files: { !'builddir/css/main.css': 'devdir/css/main.scss', } }, dev: { options: { compass:true, sourcemap: true, style: 'expanded', debugInfo: true }, files: { !'builddir/css/main.css': 'devdir/css/main.scss', } } } Tuesday, 16 July 13
39. Testing } qunit: { all: { options: { urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } } //pattern match for each file qunit: { all: ['test/**/*.html'] } Jasmine Mocha Nodeunit Tuesday, 16 July 13
40. Watch it } watch:{ ! javascripts:{ ! files:['assets/javascripts/*.js'], ! tasks:['jshint', 'qunit'] ! }, } stylesheets:{ ! files:['assets/stylesheets/*.scss'], ! tasks:['sass','csslint'] } Tuesday, 16 July 13
41. PICARD QUICK TIP #4 : LIVERELOAD options:{ ! livereload: true, } Tuesday, 16 July 13
42. Watch it, but watch out! } watch:{ ! javascripts:{ ! files:['assets/javascripts/*.js'], ! tasks:['jshint', 'qunit'] ! }, } stylesheets:{ ! files:['assets/stylesheets/*.scss'], ! tasks:['sass','csslint'] } grunt.event.on('watch', function(action, filepath) { grunt.config(['jshint', 'all'], filepath); }); Tuesday, 16 July 13
43. plugin-ecosystem } documentaion LESS boilerplates CoffeeScript heroku deployment amd ES6 Angular AWS requirejs bootstrap mocha phantomjs closure jasmine qunit stylus Ember express FTP git Tuesday, 16 July 13
44. grunt-init } npm install -g grunt-init git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery Tuesday, 16 July 13
45. Why GRUNT? } Consistency Configuration || Scripting Community Powerful Tuesday, 16 July 13
46. What now? } Install Use Contribute Heart Automation Peak at Gruntfiles Tuesday, 16 July 13
47. Tuesday, 16 July 13
48. Godspeed } THANKS @shaundunne :: about.me/shaundunne Tuesday, 16 July 13