Skip to main content

JavaScript

Create a basic Gruntfile

By Sue Johnson

Grunt logoGrunt allows you to automate repetitive tasks. In this tutorial, you will create a basic gruntfile which can compile Sass and check JavaScript syntax.

You will need to install Node.js, Grunt cli and Sass on your computer to do this tutorial. To find out how to do this on Mac OS X see here: https://suesdesign.co.uk/install-sass-node-js-and-grunt-on-mac-os-x/

Open the terminal and navigate to the directory where you want to create your project. You will need to start by creating a package.json file. You can do this by typing

npm init

You can specify the name of your project, version, project description, entry point, test command, git repository, keywords, author and license. Just press return for the defaults.

You will be shown what is going into the package.json file. It will ask you if it is OK, and you can press return to agree.

You will see that a package.json file has been added to your project.

Next you can install Grunt in your project.

npm install grunt --save-dev

Once this has completed downloading Grunt, you will find a directory named “node_modules” in your project. You will find Grunt has been added to your package.json file.

"devDependencies": {
    "grunt": "^1.0.2"
  }

Now you can create a Gruntfile for your project. Create a file, call it “Gruntfile.js” and save it in the root of your project.

Copy and paste this into your Gruntfile.js

module.exports = function(grunt) {

};

All the Grunt commands will go between the curly brackets.

Next you can add Sass to your project:

npm install grunt-contrib-sass --save-dev

Once this has downloaded, add this to your Gruntfile between the curly brackets to enable the Sass module:

grunt.loadNpmTasks('grunt-contrib-sass');

Now you need to specify settings for Sass. Copy and paste this after the first curly bracket:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
    dist: {
        files: {            
                'assets/css/styles.css' : 'assets/sass/styles.scss'    
                }
        }
    }
});

The line

pkg: grunt.file.readJSON('package.json')

imports the JSON metadata stored in package.json.

You will need to amend the path to your Sass files and CSS files for your project.

Next install JS Hint which will be used to check the JavaScript files for syntax errors.

Into the terminal type:

npm install grunt-contrib-jshint --save-dev

Now add JS Hint to your gruntfile.

grunt.loadNpmTasks('grunt-contrib-jshint');

Set up the settings. Copy and paste this after the Sass settings, note that a comma has to separate this from the Sass settings:

,
    jshint: {
        options: {
        curly: true,
        eqeqeq: true,
        globals: {
            jQuery: true
        },
    },
        files: {
            src: ['assets/js/*.js']
            }
    }

Again make sure that the path to the JavaScript file matches your project.

It would be really useful if the JS Hint and Sass tasks could happen whenever the Sass and JavaScript files were saved. To do this, you can use the Watch modules. To install it:

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

Now add watch to your Gruntfile:

grunt.loadNpmTasks('grunt-contrib-watch');

You will need to add the settings for Watch after the settings for JS Hint:

,
    watch: {
        css: {
            files: 'assets/sass/*.scss',
            tasks: ['sass']
        },
        scripts: {
            files: '<%=  jshint.files.src %>',
            tasks: ['jshint']

        }
    }

Next you will need to register the Watch task:

grunt.registerTask('default', ['watch']);

Your Gruntfile should now be something like this:

module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
    dist: {
        files: {            
                'assets/css/styles.css' : 'assets/sass/styles.scss'    
                }
        }
    },
    jshint: {
        options: {
        curly: true,
        eqeqeq: true,
        globals: {
            jQuery: true
        },
    },
        files: {
            src: ['assets/js/*.js']
            }
    },
    watch: {
        css: {
            files: 'assets/sass/*.scss',
            tasks: ['sass']
        },
        scripts: {
            files: '<%=  jshint.files.src %>',
            tasks: ['jshint']

        }
    }
    });

    // Load plugins
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Register tasks
    grunt.registerTask('default', ['watch']);
};

Into your terminal type:

grunt watch

It should respond to say it is running the watch task.

Running "watch" task
Waiting...

Try a change to the Sass files. Note that Google Chrome caches the CSS files, you can set it to not cache the files while dev tools is open.

Open up dev tools, click the column of three dots on the right hand side.

Chrome settings

Select settings and check the setting for disable cache.

Chrome settings cache

To ignore certain files for JS Hint, create a file in the root of your project and call it .jshintignore. List the paths to all the files you want it to ignore, e.g.

assets/js/jquery-1.12.0.js

For further information on the settings, see the module repositories here:

https://github.com/gruntjs/grunt-contrib-sass
https://github.com/gruntjs/grunt-contrib-jshint
https://github.com/gruntjs/grunt-contrib-watch