Grunt you way to Glory : LNUG MAY

Updated version of my gruntjs talk given at London Node meetup in May.

Transcript

1. RE-FLOW! Grunt your way to Glory Shaun Dunne - @shaundunne - about.me/shaundunne LNUG // 22-05-2013
3. Re-Flow : GYWTG WHAT IS GRUNT ? A JAVASCRIPT TASK RUNNER
4. Re-Flow : GYWTG WHAT IS GRUNT ?
5. Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE JAKE
6. Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE JAKE
7. Re-Flow : GYWTG WHAT IS GRUNT ? MAKE RAKE CAKE JAKE
8. <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> Re-Flow : GYWTG WHAT IS GRUNT ?
9. Re-Flow : GYWTG Getting GUI } CODEKIT LIVERELOAD NO CONFIG CO$T WINDOWS
10. Re-Flow : GYWTG WHAT IS GRUNT ?
11. Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
12. Re-Flow : GYWTG WHAT IS GRUNT ? grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
13. Re-Flow : GYWTG WHAT IS GRUNT ?
14. Re-Flow : GYWTG WHO USES GRUNT ? HTML5 ˒ BOILERPLATE
15. Re-Flow : GYWTG INSTALL & START USING GRUNT npm install -g grunt-cli + TWO FILES package.json Gruntfile.js
16. Re-Flow : GYWTG 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” } }
17. Re-Flow : GYWTG 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
18. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); );
19. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
20. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint');
21. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
22. Re-Flow : GYWTG Gruntfile.js
23. Re-Flow : GYWTG Tasks ++ npm install grunt-contrib-uglify --save-dev { "name": "project-x", "version": "0.0.1", "devDependencies": { “grunt”: “~0.4.0”, "grunt-contrib-jshint": "~0.4.3", “grunt-contrib-uglify”: “~0.1.2” } }
24. Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint']
25. Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } }
26. Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } 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');
27. Re-Flow : GYWTG Tasks ++ grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] } grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] uglify: { files: { 'build/assets/js/output.min.js': [ 'assets/javascript/main.js', 'assets/javascript/custom.js' ] } } grunt.loadNpmTasks('grunt-contrib-uglify');
28. Re-Flow : GYWTG Tasks ++ }
29. Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify');
30. Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin');
31. Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('imgmin', ['imagemin']); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt imgmin
32. Re-Flow : GYWTG MOAR? }
33. Re-Flow : GYWTG 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” ] },
34. Re-Flow : GYWTG back to package.json } files: { "build/<% pkg.name %>-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
35. Re-Flow : GYWTG banners } options: { banner:"/*! <% pkg.name %> v<%= pkg.version %> | " + ! ! "<%= grunt.template.today(“yyyy-mm-dd”) %> | " + ! ! ! "*/" }
36. Re-Flow : GYWTG remove logging } removeLogging:{ dist: { src: 'assets/javascripts/main.js', dest: 'assets/javascripts/main.js' } }
37. Re-Flow : GYWTG Sassy goodness } compass: { dist: { options: { config: 'config.rb' } } }
38. Re-Flow : GYWTG 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
39. Re-Flow : GYWTG Watch it } watch: { scripts: { files: '**/*.js', tasks: ['jshint'] } } watch: { css: { files: '**/*.sass', tasks: ['compass'] } }
40. Re-Flow : GYWTG plugin-ecosystem } documentaion LESS boilerplates CoffeeScript heroku deployment amd ES6 Angular AWS requirejs bootstrap mocha phantomjs closure jasmine qunit stylus Ember express FTP git
41. Re-Flow : GYWTG grunt-init } npm install -g grunt-init git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery grunt-init jquery
42. Re-Flow : GYWTG Why GRUNT? } Consistency Configuration || Scripting Community Powerful
43. Re-Flow : GYWTG What now? } Install Use Contribute Heart Automation Peak at Gruntfiles
44. Re-Flow : GYWTG Godspeed } THANKS @shaundunne :: about.me/shaundunne