Grunt your way to Glory - SideView 2013

Presentation from SideView 2013 - Grunt you way to Glory

Transcript

1. GRUNT YOUR GRUNT YOUR WAY TO GLORY WAY TO GLORY or:how to stop doing things manually and learn to love automation
2. Automation isn’t about being lazy. It’s about being efficient. - Addy Osmani
3. ENSIGN DEV
4. UGLYFY&MINFY COMPILE&CONCAT COMPRESS&OPTIMISE IMAGES LINT JS BLESS CSS GENERATE DOCUMENTATION STICK IT IN BUILD ZIP IT&UPLOAD IT TO S3
5. #!/bin/sh
6. MAKE RAKE CAKE JAKE
7. MAKE RAKE CAKE JAKE
8. MAKE RAKE CAKE JAKE
9. @paul_irish
11. <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>!
12. <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>!
13. CODEKIT PREPROS HAMMERforMAC LIVERELOAD MIXTURE £ £ £ £ free
18. {! "name": "new-project",! "version": "0.0.1" }
19. {! "name": "new-project",! "version": "0.0.1" }
20. "devDependencies": {! "grunt": "~0.4.1"! } , {! "name": "new-project",! "version": "0.0.1" ! }
21. Shell functions. Make it so! .bashrc / .zshrc function gi(){! ! npm install --save-dev grunt-"$@"! }! ! function gci(){! ! npm install --save-dev grunt-contrib-"$@"! }!
23. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { );
24. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint');
25. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint'); jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! }
26. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint'); jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } {! "bitwise": true,! "camelcase": true,! "curly": true,! "eqeqeq": true,! "forin": true,! "immed": true,! "indent": 4,! "browser": true,! "jquery": true,! "white": false! }
27. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint'); jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } {! "bitwise": true,! "camelcase": true,! "curly": true,! "eqeqeq": true,! "forin": true,! "immed": true,! "indent": 4,! "browser": true,! "jquery": true,! "white": false! } , ['jshint'] task name task list
28. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); grunt.loadNpmTasks('grunt-contrib-jshint'); jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } , ['jshint' ] grunt.loadNpmTasks('grunt-contrib-uglify'); uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , ,'uglify'
29. }; grunt }); module grunt jshint options all } grunt uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , var pkg = grunt.file.readJSON('package.json'); var scripts = ['assets/**/*.js', '!**/*.min.js'] grunt.registerTask('default' ); , ['jshint' ] ,'uglify'
30. Globbing! Make it so! var scripts = ['assets/**/*.js', '!**/*.min.js'] all .js files INC sub directories ! negates the pattern match more : https://github.com/cowboy/node-globule
31. }; grunt }); module grunt.loadNpmTasks('grunt-contrib-jshint'); jshint options all } grunt.loadNpmTasks('grunt-contrib-uglify'); uglify options dist }, ! } , grunt.registerTask('default' ); , ['jshint' ] ,'uglify'
32. matchdep. Make it so! require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
33. }; grunt.initConfig({ }); grunt.registerTask('default' module.exports = function(grunt) { ); jshint: {! options: { jshintrc: '.jshintrc' },! all: ['**/*.js']! } , ['jshint'] uglify: {! options: { compress: { unsafe: false } },! dist: {! options: {! banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +! '<%= grunt.template.today("yyyy-mm-dd") %> */\n',! }, ! src: '<%= scripts %>',! dest: paths.min! } , require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
35. configGrunt = function (grunt) { ! ! var taskConfig = {! /* ALL THE GRUNT TASK CONFIGURATION */! }! ! grunt.initConfig(taskConfig);! ! grunt.registerTask('default', ['jshint', 'uglify', 'concat']});! grunt.registerTask('build', ['jshint', 'uglify', 'concat', 'S3', 'groc']});! ! }! ! module.exports = configGrunt;
36. YOU’RE GONNA SEE SOME SERIOUS S**T
37. 50,000 +
38. 1000+
40. +
41. Sass LESS CoffeeScript TypeScript Jade markdown
47. npm install -g grunt-init git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin grunt-init TEMPLATENAME
52. CONFIG {or} SCRIPT CONSISTENT COMMUNITY POWERFUL
53. USE <3 AUTOMATION PEEK @ GRUNTFILES CONTRIBUTE
54. niceagency.co.uk
55. SHAUN DUNNE SHAUN DUNNE @shaundunne || +shaundunne || github.com/shaundune www.shaundunne.com