• Phone: (03) 9369-3298   
  • Mobile: 0481-0654-51

Installing Grunt

  • Errol Schmidt
  • 29th May, 2016
Installing Grunt

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.

About the Author

eSquareNews is a design and development agency. we deal in web development and print design work.

We have been operating for greater than a decade, producing high quality work for businesses of all sizes.

We tackle each job individually and professionally, with the aim of producing high quality unique work that fits into the budget of the client. We are always available to work for you, and scale our services using local professionals as required.


Blog Categories

All Articles

All articles from eSquareNews. Articles about web design and development, opinion and news around Australia.


Case Studies and Testimonials

Real stories and examples of deisgn and web developemnt done by us and others


Design News

All recent news and updates concerning design in Australia, Melbourne and Sydney


Design Trends

Its important to keep up with the most recent trends in design and web tools. Is your website up to date?


Other Articles

Miscellaneous and other articles about the design industry


SEO News and Tips

Some of the latest news in navigating the minefield of SEO


Web Design and Development Technical

The technical side of web design. Something interesting comes up for us, I'll probably tell you about it here.


Recent News from us