//

GRUNT WATCH & LIVERELOAD WITH JAVASCRIPT & SASS

Grunt is a task runner that has a ton of plugins for doing things like compiling LESS/SASS into CSS, concatenating JavaScript, minifying, etc. It also has a package for watching files (the same way CodeKit and Prepros does) and firing off certain tasks when they’re modified.

Given that Grunt has these features, once it’s integrated into a project, it makes sense to leverage it for the real-time compiling and reloading of JS/LESS/SASS files. You’ll be able to reuse many of the same build tasks and it’ll allow other developers (who may not have CodeKit installed) to easily follow the same workflow when they open your project. Here’s how to do it.

Suppose we have a project using JavaScript and SASS. The file structure can look as follows:

tree
/src
  /jquery.js
  /functions.js
  /app.js
/sass
  /_header.sass
  /_footer.sass
  /_body.sass
  /main.sass
/public
  /css
    /style.css
  /js
    /main.min.js

We have 3 JavaScript files in the /src directory that need to be combined and minified into /public/js/main.min.js. We also have a main.sass file (that imports the other underscored .sass files) and compiles down into /public/css/style.css.

In CodeKit, you’d drag this whole folder into your window. You would configure some options and set the output paths, then you’d be good to go. CodeKit would start watching the files and automatically recompile.

In Grunt, however, we need to explain these procedures via a configuration file. Don’t worry. It’s easy! Here’s what you need to do.

This seems like tedious, and a lot of steps, but often times many of them are done already — especially if you’re working on a Node.js project.

1. Install Node.js (with NPM)

Even if your project isn’t written in Node.js, you’ll need it to access these tool. Just go to nodejs.org and grab the latest copy. This will also install NPM (the Node.js Package Manager).

2. Install Grunt

Because you’ll be using Grunt a lot, it’s easiest to just install it globally. You can do that by running this command:

sudo npm install -g grunt-cli

After the installation is complete, you may need to exit your terminal window and reopen it again to gain access to the grunt command.

3. Configure NPM’s package.json with Grunt Plugins

Ok, NPM is installed. Now we need to configure the necessary packages so that all the Grunt plugins we need will be downloaded. You’ll need to create a package.json file with the contents below. If this file already exists, just add the entries in the dependencies section.

{
  "name": "my-project",
  "version": "0.1.0",
  "dependencies": {
    "grunt-cli": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-sass": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest"
  }
}

4. Install Grunt Plugins via NPM

Now that we’ve configured our package.json file with the packages we need, let’s install them.

npm install

5. Configure Gruntfile.js

Ok, everything is installed. The last thing we need to do is setup Grunt’s configuration file.

module.exports = function(grunt) {

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

  grunt.initConfig({
    concat: {
      js: {
        options: {
          separator: ';'
        },
        src: [
          'src/*.js'
        ],
        dest: 'public/js/main.min.js'
      },
    },
    uglify: {
      options: {
        mangle: false
      },
      js: {
        files: {
          'public/js/main.min.js': ['public/js/main.min.js']
        }
      }
    },
    sass: {
      style: {
        files: {
          "public/css/style.css": "sass/main.sass"
        }
      }
    },
    watch: {
      js: {
        files: ['src/*.js'],
        tasks: ['concat:js', 'uglify:js'],
        options: {
          livereload: true,
        }
      },
      css: {
        files: ['sass/*.sass'],
        tasks: ['sass:style'],
        options: {
          livereload: true,
        }
      }
    }
  });

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

};

This configuration file setups up a number of tasks for concatenating, compiling and minimizing the JS and SASS. It also tells Grunt to execute the tasks anytime the files are modified.

6. Run Grunt Command to Watch Your Files

Now that everything is downloaded and configured, we simply need to run a single command to make Grunt start watching our files.

grunt watch

Run this command (in your project’s root directory) anytime you want Grunt to start watching your files. To stop the process, simply use control + c on your keyboard.

You’ll notice that there are a few live reload flags in the Grunt configuration file above. This tells Grunt to alert LiveReload that files have changed so that it can automatically refresh your browser window. For this functionality to work, you can purchase LiveReload or just install the free LiveReload Chrome Extension. (Make sure it’s enabled by clicking the icon in your browser’s toolbar.)

Please note that if your files are structured or named differently, you may need to adjust the configuration above.