Grunt all day!

Grunt has fast become the defacto workflow workhorse in the modern web developers tool kit. This session will introduce you to using Grunt in your daily routines as well as surrounding technologies. Drop in for a brief introduction to Node and NPM, the Node Package Manager. Following that we will deep dive into Grunt and other strange noises like Bower, SASS, Lint, or live-reload.

Transcript

1. Grunt all day!
   
   …and some other stuff
   Douglas Knudsen
   
   Universal Mind
   

   View Slide

2. View Slide

3. please remember to fill out the surveys
   

   View Slide

4. me
   twitter: douglasknudsen
   !
   G+: douglasknudsen
   !
   email: douglasknudsen@gmail.com
   !
   blog: http://www.cubicleman.com
   !
   https://github.com/douglasknudsen
   

   View Slide

5. agenda
   • why oh why
   • enter Grunt!
   • but first, some node
   • and some npm
   • onto grunt
   • plugins galore
   

   View Slide

6. Karma!
   

   View Slide

7. why
   we love for loops
   but not when they involve us directly
   

   View Slide

8. why
   along came ant
   maven
   xml config
   make
   nant
   

   View Slide

9. why
   why not use JS?
   

   View Slide

10. why
    enter grunt
    configuration based on JS
    

    View Slide

11. what
    grunt is a javascript task runner
    workflow tool
    

    View Slide

12. what
    based on nodejs
    

    View Slide

13. node
    JS all up in your server!
    evented I/O for the V8 JS engine
    cylonjs, hummingbird, johnny-five, AWS,
    machine_learning
    

    View Slide

14. node
    var net = require('net');
    !
    var server = net.createServer(function (socket) {
    socket.write('Echo server\r\n');
    socket.pipe(socket);
    });
    !
    server.listen(1337, '127.0.0.1');
    

    View Slide

15. node
    cross platform
    http://nodejs.org/
    grab your binaries
    

    View Slide

16. node
    many libraries exist, crazy community fever
    nearly 90k packages.
    23m dls a day
    https://www.npmjs.org/
    

    View Slide

17. node : npm
    enter npm
    node package manager
    comes with node
    though its not really a acronym
    

    View Slide

18. node : npm
    use npm to install libraries
    npm install lodash
    

    View Slide

19. node : npm
    libraries can be installed globally
    or locally
    npm install -g yo
    npm install lodash
    

    View Slide

20. node : npm
    node_modules
    package.json
    npm install grunt-contrib-copy --save-dev
    

    View Slide

21. npm : package.json
    {
    "name": "david-tucker-site",
    "version": "0.0.6",
    "author": "David Tucker",
    "description": "The Personal Blog of David Tucker at davidtucker.net",
    "devDependencies": {
    "browserify-shim": "~2.0.3",
    "grunt-contrib-jshint": "~0.4.3",
    "grunt-contrib-sass": "~0.3.0"
    }
    }
    npm init
    

    View Slide

22. npm
    add node_modules to .gitignore
    you are using git are you not?
    npm install
    

    View Slide

23. grunt
    npm install -g grunt-cli
    cd
    npm install grunt --save-dev
    

    View Slide

24. grunt
    the grunt file
    Gruntfile.js
    

    View Slide

25. grunt : gruntfile
    module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
    options: {
    separator: ';'
    },
    dist: {
    src: ['src/**/*.js'],
    dest: 'dist/<%= pkg.name %>.js'
    }
    }
    });
    grunt.loadNpmTasks(‘grunt-contrib-concat');
    };
    

    View Slide

26. grunt : gruntfile
    module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
    });
    };
    wrapper
    config
    read
    

    View Slide

27. grunt : gruntfile
    cssmin: {
    production: {
    expand: true,
    cwd: 'css',
    src: ['*.css'],
    dest: 'css'
    },
    dev: {
    expand: false,
    cwd: 'css',
    src: ['*.css'],
    dest: 'css'
    }
    }
    task
    target
    

    View Slide

28. grunt : gruntfile
    grunt cssmin:dev
    

    View Slide

29. grunt : gruntfile
    http://gruntjs.com/sample-gruntfile
    npm install -g grunt-init
    usage: grunt-init jquery
    

    View Slide

30. grunt
    run multiple tasks sequentially
    grunt.registerTask(‘workFlow’, [‘sass:dev’,’karma’,’copy’])
    

    View Slide

31. grunt : sass
    grunt.loadNpmTasks('grunt-contrib-compass')
    https://github.com/gruntjs/grunt-contrib-compass
    compile sass to css using compass
    

    View Slide

32. grunt : cssmin
    compass: {
    
    dist: {
    
    options: {
    
    cssDir: ['<%= distdir %>/css'],
    
    sassDir: ['src/styles'],
    
    noLineComments: true,
    
    importPath: ['bower_components/bootstrap-sass-official'],
    
    force: true
    
    }
    
    },
    
    dev: {
    
    options: {
    
    cssDir: ['<%= distdir %>/css'],
    
    sassDir: ['src/styles'],
    
    importPath: ['bower_components/bootstrap-sass-official']
    
    }
    
    

    View Slide

33. grunt : jshint
    grunt.loadNpmTasks('grunt-contrib-jshint')
    https://github.com/gruntjs/grunt-contrib-jshint
    validate your js with jshint
    

    View Slide

34. grunt : jshint
    jshint:{
    files:['gruntFile.js', '<%= src.js %>', '<%= src.jsTpl %>', '<%=
    src.specs %>', '<%= src.scenarios %>'],
    options:{
    curly:true,
    eqeqeq:true,
    immed:true,
    latedef:true,
    newcap:true,
    noarg:true,
    sub:true,
    boss:true,
    eqnull:true,
    globals:{}
    }
    }
    

    View Slide

35. grunt : watch
    grunt.loadNpmTasks('grunt-contrib-watch')
    https://github.com/gruntjs/grunt-contrib-watch
    run tasks when watched file patterns are modified
    

    View Slide

36. grunt : watch
    watch:{
    options: {
    livereload:true
    },
    js: {
    files: ['<%= src.js %>'],
    tasks: ['js', 'timestamp']
    },
    css: {
    files: ['<%= src.sass %>'],
    tasks: ['css', 'timestamp']
    }
    

    View Slide

37. grunt : tl;dr
    • install node
    • npm install -g grunt-cli
    • cd /../your/project../
    • npm init
    • npm install grunt --save-dev
    • touch Gruntfile.js
    • add tasks to Gruntfile.js
    • grunt!
    

    View Slide

38. grunt : tl;dr
    TWO important files:
    package.json
    Gruntfile.js
    

    View Slide

39. grunt : other
    yes folks, you can make maven grunt
    yes folks, you can make nuget grunt
    

    View Slide

40. grunt : yo
    scaffolding!
    opinionated scaffolding!
    

    View Slide

41. yo
    npm install -g yo
    npm install -g generator-webapp
    yo webapp
    grunt serve
    

    View Slide

42. yo : webapp
    • html5 boilerplate
    • twiiter bootstrap
    • sass
    • structure
    • build
    • jasmine
    • karma
    • phantomjs
    • dependencies via bower
    • …
    

    View Slide

43. yo : angular
    npm install -g generator-angular
    yo angular
    yo angular:controller myController
    yo angular:directive myDirective
    

    View Slide

44. yo
    many many generators
    • angular
    • jhipster
    • ember
    • backbone
    • meanstack
    • karma
    • symfony
    • foundation
    

    View Slide

45. yo
    result
    structure
    dependencies
    tools
    

    View Slide

46. yo
    don’t see one you need?
    don’t like the way a generator works?
    my team has a different way!
    role your own!
    http://yeoman.io/authoring/
    

    View Slide

47. gulp
    gulp is on the horizon
    still kind of new
    http://gulpjs.com/
    code-over-configuration
    

    View Slide

48. resources
    • http://davidtucker.net/articles/automating-with-grunt
    • https://www.npmjs.org/
    • http://www.slideshare.net/RahulNanwani/integrating-
    grunt-and-bower-with-maven
    • https://www.npmjs.org/package/grunt-nuget
    • http://yeoman.io/
    • http://gruntjs.com/
    • https://github.com/angular-app/angular-app
    • http://joelhooks.com/
    • http://cliffmeyers.com/
    • http://livereload.com/
    • https://egghead.io/technologies/grunt
    

    View Slide

49. ciao
    thanks for dropping in!
    be sure to fill out the survey
    

    View Slide