Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:3.6 hours

2.14 Grunt.js

GruntJS is a build tool. We will combine a lot of things that we previously learnt in both part 1 and 2 of this course — Jade, SASS, LiveReload, CSSLint, etc. You’ll see the power of build tool when we can execute several tasks to compile, lint or build a project with just one command in our Terminal.

Open up the source code folder to see the final product. Execute `npm install` to install all the relevant grunt plugins and with play with the commands `grunt`, `grunt server` or `grunt build` in the command line.

Prerequisites
  1. HTML, CSS, JavaScript
  2. editorconfig
  3. NPM
  4. Jade, SASS
  5. LiveReload
Prerequisites
  1. GruntJS and plugins
  2. example Gruntfile.js
  3. Reving filenames instead of using query strings
Flow
  1. desktop folder project
  2. new folder project/app
  3. new file .editorconfig

    root = true

    [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf–8 trim_trailing_whitespace = true insert_final_newline = true

jade and grunt init
  1. create a jade file app/index.jade

    doctype 5 html(lang="en") head title My Travels body strong My Travels p it's so much fun!

  2. install gruntjs

    npm install -g grunt-cli grunt --version

  3. create package.json

    { "name": "my-travels", "version": "0.1.0", "dependencies": {}, "devDependencies": { "grunt": "0.4.1", "grunt-contrib-jade": "0.7.0 " } }

  4. create Gruntfile.js

    module.exports = function(grunt) {

    grunt.initConfig({ jade: { compile: { options: { pretty: true, data: { debug: false } }, files: { “app/index.html”: [“app/*.jade”] } } } });

    grunt.loadNpmTasks(‘grunt-contrib-jade’);

    grunt.registerTask(‘default’, [‘jade’]);

    };

  5. shell

    npm install grunt

clean
  1. add to package.json

    "grunt-contrib-clean": "0.4.1"

  2. add to Gruntfile.js

    clean: { development: [‘<%= appFolder %>index.html’, ‘<%= appFolder %>styles’] } … grunt.loadNpmTasks(‘grunt-contrib-clean’); … grunt.registerTask(‘default’, [‘clean’, ‘jade’]);

sass
  1. create sass files sass/style.sass and typography.sass

    // style.sass body margin: 0px box-sizing: border-box background-color: lightblue font-family: Helvetica Neue

    @import ‘typography’

    // typography.sass strong color: navy

    p color: #444

  2. add to index.jade

    link(rel="stylesheet", href="styles/style.css")

  3. add to package.json

    "grunt-contrib-sass": "0.4.0"

  4. add to Gruntfile.js

    clean: [“app/index.html”, “app/styles”], … sass: { development: { options: { style: ‘expanded’, lineNumbers: true }, files: { ‘app/styles/style.css’: ‘app/sass/style.sass’ } } } … grunt.loadNpmTasks(‘grunt-contrib-sass’); … grunt.registerTask(‘default’, [‘clean’, ‘jade’, ‘sass’]);

  5. shell command

    npm install grunt

css lint
  1. add to package.json

    "grunt-contrib-csslint": "0.1.2"

  2. add to Gruntfile.js

    clean: ["app/index.html"] ... csslint: { strict: { src: ['app/styles/style.css'] } } ... grunt.loadNpmTasks('grunt-contrib-csslint'); ... grunt.registerTask('default', ['clean', 'jade', 'sass', 'csslint']);

  3. shell command

    npm install grunt

  4. with .csslintrc

    { "box-sizing": false }

    in Gruntfile.js

    csslint: { options: { csslintrc: '.csslintrc' }, strict: { src: ['app/styles/style.css'] } }

  5. shell

    npm install grunt

variables
  1. in Grunfile.js

    grunt.initConfig({ appFolder: 'app/', distFolder: 'dist/', ...

  2. find all and replace

    clean: ['app/index.html', 'app/styles'], ... clean: ['<%= appFolder %>index.html', '<%= appFolder %>styles'],

watch
  1. in package.json

    "grunt-contrib-watch": "0.4.4"

  2. in Gruntfile.js

    watch: { html: { files: ['<%= appFolder %>/index.jade'], tasks: ['jade'] }, styles: { files: ['<%= appFolder %>/styles.style.css', '<%= appFolder %>/sass/style.sass'], tasks: ['sass:development', 'csslint'] } } … grunt.loadNpmTasks('grunt-contrib-watch'); … grunt.registerTask('server', ['watch']);

  3. shell

    npm install grunt server

server
  1. in package.json

    "grunt-contrib-connect": "0.3.0", "grunt-concurrent": "0.3.0", "grunt-open": "0.2.0"

  2. in Gruntfile.js

    connect: { development: { options: { port: 9000, base: ‘<%= appFolder %>’, hostname: ‘localhost’ } } } … open: { server: { path: ‘http://localhost:<%= connect.development.options.port %>’ } } … concurrent: { development: [ ‘jade’, ‘sass’, ‘csslint’ ] }, …

    grunt.loadNpmTasks(‘grunt-contrib-connect’); grunt.loadNpmTasks(‘grunt-open’); grunt.loadNpmTasks(‘grunt-concurrent’);

    grunt.registerTask(‘server’, [‘clean’, ‘concurrent:development’, ‘connect:development’, ‘open’, ‘watch’]);

  3. shell + livereload

    npm install grunt server

production copy html
  1. in package.json

    "grunt-contrib-copy": "0.4.1"

  2. in Gruntfile.js

    clean: { development: [‘<%= appFolder %>index.html’, ‘<%= appFolder %>styles’], production: [‘<%= distFolder %>’] },

    copy: { production: { files: [ {src: [‘<%= appFolder %>/index.html’], dest: ‘<%= distFolder %>/index.html’} ] } } … grunt.loadNpmTasks(‘grunt-contrib-copy’); … grunt.registerTask(‘build’, [‘clean:production’, ‘copy:production’]);

  3. shell command

    npm install grunt build

sass to minified css
  1. in Gruntfile.js

    sass: { development: { … }, production: { options: { style: ‘compressed’, lineNumbers: false }, files: { ‘<%= distFolder %>styles/style.css’: ‘<%= appFolder %>sass/style.sass’ } } }, …

    grunt.registerTask(‘build’, [‘clean:production’, ‘copy:production’, ‘sass:production’]);

  2. shell command

    grunt build

revision number
  1. in package.json

    "grunt-rev": "0.1.0",

  2. in Gruntfile.js

    rev: { options: { algorithm: ‘md5’, length: 8 }, assets: { files: [{ src: [ ‘dist/styles/style.css’ ] }] } }, …

    grunt.loadNpmTasks(‘grunt-rev’);

    grunt.registerTask(‘build’, [‘clean:production’, ‘copy:production’, ‘sass:production’, ‘rev’]);

  3. shell command

    npm install grunt build

usemin
  1. in package.json

    "grunt-usemin": "0.1.12"

  2. in index.jade

    // build:css styles/style.css link(rel="stylesheet", href="styles/style.css") // endbuild

  3. shell command to see the html comments

    grunt

  4. in Gruntfile.js

    usemin: { html: [‘dist/index.html’] },

    grunt.loadNpmTasks(‘grunt-usemin’);

    grunt.registerTask(‘build’, [‘clean:production’, ‘copy:production’, ‘sass:production’, ‘rev’, ‘usemin’]);

  5. shell command

    npm install grunt build