Skip to content

Latest commit

 

History

History
123 lines (96 loc) · 3.65 KB

ex2-grunt.md

File metadata and controls

123 lines (96 loc) · 3.65 KB
Raw

Excercise 2 - Setting up your grunt file

1.5h

In this exercise you will

  • Create the following file structure under project root
 \dist
 \public
  \js
    app.js
  \css
  \scss
    main.scss
  \img
    someImage.png
  index.html
  pre-index.html
  • Install Grunt cli globally
  • Install grunt local to project
  • Build ontop of the sample Gruntfile.js
  • Add Grunt and install the relevant grunt tasks
  • Define a build task to copy uglified js files to dist directory
  • Define a dev watch task that transpiles scss files to css upon file change

use these tips

Installing Grunt

Before we begin setting our project with grunt, we first need to have grunt installed on our system, so that we can use it's command line interface in our terminal.

    npm install -g grunt-cli

Having grunt installed on our system we now add the grunt module to our project]

    npm install grunt --save-dev

NPM plugins for this task

npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
npm install load-grunt-tasks --save-dev

Optional - complete the full build task

Define a build task

Follow the presentation slide regarding the task build

You can either use the cli to add modules selectively or add them directly to npm package.json file.

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-requirejs --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-preprocess --save-dev
npm install grunt-replace --save-dev
npm install load-grunt-tasks --save-dev
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-compass": "^0.9.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-preprocess": "^4.0.0",
    "grunt-replace": "~0.7.8",
    "load-grunt-tasks": "^0.6.0"
  }

Optional - challange yourself with a core build task

This task completion crieteria is to at least define these 3 important modules:

  1. define compass through gruntfile rather than through config.rb to transpile your sass into css.

  2. Same follows to linting JavaScript through jsHint (see below).

  3. And preprocess your html to account for dev and release configurations.

requirejs through r.js is another important task but we'll come across this later.

Tip: Setting Up jsHint (grunt-contrib-jshint)

Though you have jsHint set for your project it's best you also install the global package to give you cli interface for validating your JavaScript files.

You can find a default .jshintrc file here

An important comment regarding global installs of modules is that you should make sure your shell rc has the $PATH updated to include the global npm folder /usr/local/lib/node_modules npm install -g jshint