Skip to content

Instantly share code, notes, and snippets.

@SalahHamza
Last active July 31, 2018 23:30
Show Gist options
  • Save SalahHamza/308aff54567fc8e331dff8eb1ee25b19 to your computer and use it in GitHub Desktop.
Save SalahHamza/308aff54567fc8e331dff8eb1ee25b19 to your computer and use it in GitHub Desktop.
Grunt notes

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

via: Wikipedia

Installation

1- install grunt-cli globally:

npm install -g grunt-cli

What does it do? grunt-cli runs the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

2 - The root of your project must have both package.json and a Grunfile:

  • package.jsoncan be created by initializing the project with npm init or npm init -y to skip the questionnaire altogether.
  • the Gruntfile must be created manually.
    • Gruntfile.coffee for Coffeescript.
    • Gruntfile.jsfor plain Javascript. Note: both package.json and Grunfile should be committed with your project source.

3 - install gruntlocally as a DevDependency:

npm install grunt --save-dev

or in case you want to install a specific version:

npm install grunt@VERSION --save-dev

Note: VERSION is the grunt version you want to install (e.g. 0.4.5).

4 - install needed gruntplugins, also as DevDependencies. Here are some recommended plugins:

npm install grunt-contrib-jshint --save-dev
  • grunt-contrib-clean which is a tool that cleans up your build to make sure that no artifacts from previous builds are hanging around, read more about it here:
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-nodeunit --save-dev
npm install grunt-contrib-uglify --save-dev
  • grunt-mkdir gives grunt the ability to create directories:
npm install grunt-mkdir --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-responsive-images --save-dev

configuration

All your Grunt code must be specified inside a wrapper function :

module.exports = function(grunt) {
  // Do grunt-related things in here
};

And tasks configuration is done through grunt.initConfig function, that takes tasks configuration Object:

module.exports = function(grunt) {
  grunt.initConfig({
    // Your Task-named properties go here
  });
};

You can access package.json file within grunt using grunt.file.readJSON('package.json').

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment