Grunt Your Way with Style

If you have used a CSS preprocessor like Stylus, Sass or Less you know about how constantly compiling your files into CSS gets real old real fast. Thankfully Grunt is here to rescue you. Grunt will allow you to automate a number of tasks, saving you time and your sanity.

By the end of this post you will be able to automate compiling stylus file in to CSS.

First things first, we will be setting up the very basic Gruntfile with a ‘stylus’ task. Prerequisites: installing grunt and grunt-contrib-stylus with npm and a properly configured package.json file. (Side note, plugins named ‘grunt-contrib…’ are maintained by grunt and should be used when possible).

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

    stylus: {
      compile: {
        options: {
          paths: ["path/to/your/css/files"],
        },
        files: {
          "path/to/your/cssFile.css": "path/to/your/stylusFile.styl" // 1:1 compile
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-stylus');
};

This will allow you to type “grunt stylus” into your command line in order to compile your stylus file into css.

Now let’s take advantage of grunt and automate this compilation to occur whenever we save a change to our stylus file. Before we can touch our Gruntfile we will need to run

npm i grunt-contrib-watch --save-dev

to install the necessary grunt plugin and have it saved to your package.json file.

We will add a ‘watch’ task and let it know where it should be looking for changes. This task will go into the configuration object and for clarity we will place it above the ‘stylus’ task.

  grunt.initConfig({

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

    watch: {
      scripts: {
        files: ['path/to/**/*.styl'],
        tasks: ['stylus']
      }
    },

    stylus: {...

With our new plugin we better remember to actually load it!

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

We could have explicitly included the exact path to our file, but incase we wanted to alter the location or file name we just have a general reference. With the ‘watch’ task now defined we can run ‘grunt watch’ from the command line once and allow grunt to run the ‘stylus’ task for us when we make changes to our stylus file.

While we’re at it why even run ‘grunt watch’ when we could just run ‘grunt’?! Let’s get real crafty and just set the default ‘grunt’ task to run our watch task.

  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['watch']);

If we decide we really like letting grunt do things for us we could add a number of other tasks (like for testing, running our server, etc.) and even include them in our default task.

SO, the final product is

module.exports = function(grunt) {

  grunt.initConfig({

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

    watch: {
      scripts: {
        files: ['path/to/**/*.styl'],
        tasks: ['stylus']
      }
    },

    stylus: {
      compile: {
        options: {
          paths: ["public/css"],
        },
        files: {
          "path/to/your/cssFile.css": "path/to/your/stylusFile.styl" // 1:1 compile
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['watch']);

};
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s