Re-Flow : Grunt your way to Glory

A brief introduction to the world of using Grunt.js and loving automation.

Transcript

1. RE-FLOW! Grunt your way to Glory Shaun Dunne - @shaundunne - www.shaundunne.com
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. <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 ?
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 grunt-cli
16. Re-Flow : GYWTG INSTALL & START USING GRUNT npm install -g grunt grunt-cli + TWO FILES package.json Gruntfile.js
17. Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies": { } }
18. Re-Flow : GYWTG package.json { "name": "project-x", "version": "0.0.1", "devDependencies": { } } npm install grunt --save-dev
19. 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” } }
20. Re-Flow : GYWTG package.json npm install grunt-contrib-jshint --save-dev
21. 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" } }
22. 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
23. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); );
24. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
25. Re-Flow : GYWTG Gruntfile.js grunt.initConfig({ grunt.registerTask('default' module.exports = function (grunt) { } }); ); jshint: { options: { jshintrc : '.jshintrc' }, all: ['assets/**/*.js'] }
26. 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');
27. 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']
28. Re-Flow : GYWTG Gruntfile.js
29. Re-Flow : GYWTG Tasks ++ npm install grunt-contrib-uglify --save-dev
30. 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” } }
31. 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']
32. 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' ] } }
33. 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');
34. 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');
35. Re-Flow : GYWTG Tasks ++ }
36. Re-Flow : GYWTG non default Tasks } grunt.registerTask('default' ); grunt.loadNpmTasks('grunt-contrib-jshint'); , ['jshint', 'uglify'] grunt.loadNpmTasks('grunt-contrib-uglify');
37. 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');
38. 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
39. Re-Flow : GYWTG MOAR? }
40. Re-Flow : GYWTG back to package.json } grunt.initConfig({ ! ! pkg: grunt.file.readJSON("package.json"), //other stuff })
41. 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” ] },
42. Re-Flow : GYWTG back to package.json } files: { "build/<% pkg.name %>-<% pkg.version %>.js": [ "assets/javascripts/main.js", “assets/javascripts/custom.js” ] },
43. Re-Flow : GYWTG banners } options: { banner:"/*! <% pkg.name %> v<%= pkg.version %> | " + ! ! "<%= grunt.template.today(“yyyy-mm-dd”) %> | " + ! ! ! "*/" }
44. Re-Flow : GYWTG remove logging } removeLogging:{ dist: { src: 'assets/javascripts/main.js', dest: 'assets/javascripts/main.js' } }
45. Re-Flow : GYWTG baking } <!--(bake ../includes/head.html)--> <!--(bake ../modules/banner.html)--> <section id="wrapper" class="layout-container width-100"> <!--(bake ../modules/cookieTrail.html)--> <!--(bake ../modules/plainBanner.html)--> </section> <!--(bake ../includes/footer.html)-->
46. Re-Flow : GYWTG Sassy goodness } compass: { dist: { options: { config: 'config.rb' } } }
47. Re-Flow : GYWTG Testing } qunit: { all: { options: { urls: [ 'http://localhost:8000/test/home.html', 'http://localhost:8000/test/about.html' ] } } }
48. 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'] }
49. 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
50. 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
51. Re-Flow : GYWTG grunt-init } npm install -g grunt-init
52. Re-Flow : GYWTG grunt-init } npm install -g grunt-init git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
53. 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
54. 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
55. Re-Flow : GYWTG Watch it } watch: { scripts: { files: '**/*.js', tasks: ['jshint'] } } watch: { css: { files: '**/*.sass', tasks: ['compass'] } }
56. Re-Flow : GYWTG Why GRUNT? } Consistency Configuration || Scripting Community Powerful
57. Re-Flow : GYWTG What now? } Install Use Contribute Heart Automation Peak at Gruntfiles
58. Re-Flow : GYWTG Godspeed } THANKS @shaundunne :: www.shaundunne.com