eSquareNews Article

Installing Grunt

• Errol Schmidt
• 29th May, 2016

The Grunt taskrunner is a popular choice for caring for executing routine tasks during production of a web application.

Here is a brief rundown of how to install this so that it can be used for your application.

These instructions are for OS X.

Open up a terminal window, and cd to the project root that you are working in.

1. Setup your package.json. You will need to run through the wizard question to set this up fully, but the defaults are usually fine. You can always change these later.

   npm init
   

2. Install Grunt CLI as global. This may have already been done - if so, skip this step as it done once for the machine.

   npm install -g grunt-cli
   

3. Install Grunt in your local project:

   npm install grunt --save-dev
   

4. Install any Grunt Module you may need for the build process. Here are some I like to add. (They are self explanetary, but you can look each of them up on git for a full explanation and options for each). Press return after each:

   npm install grunt-contrib-cssmin --save-dev

   npm install grunt-contrib-concat --save-dev

   npm install grunt-contrib-uglify --save-dev

   npm install grunt-contrib-watch --save-dev

5. Now you need to edit the Gruntfile.js which will control the  tasks being run:

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    cssmin: {
      options: {
        shorthandCompacting: false,
        roundingPrecision: -1
      },
      target: {
        files: {
          'assets-opt/test.min.css': ['css/*.css', 'source/jquery.fancybox.css']
        }
      }
    },
    concat: {
      options: {
        // define a string to put between each file in the concatenated output
        separator: ';'
      },
      dist: {
        // the files to concatenate
        src: ['js/*.js'],
        // the location of the resulting JS file
        dest: 'assets-opt/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        // the banner is inserted at the top of the output
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */'
      },
      dist: {
        files: {
          'assets-opt/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    watch: {
      files: ['css/*.css'],
      //tasks: ['cssmin', 'concat', 'uglify']
      tasks: ['cssmin']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');


  grunt.registerTask('default', [ 'watch']);
  grunt.registerTask('test', ['cssmin', 'concat', 'uglify']);
}

In this example above you can run the command grunt . This will set the watch process running, which in turn runs cssmin, concat and uglify tasks automatically. It watches for changes in the code and updates as needed. Running grunt test will run each of these processes just once.

Let me know how you go with this @esquaredesign.

Related Posts

Installing Grunt

The History of Email (or What's Wrong with my Emails)

Easily getting started - Installing Yii2

What is Google Mail?