Set up Grunt

Grunt can automate many things for you, see http://gruntjs.com and https://www.jetbrains.com/webstorm/help/using-grunt-task-runner.html

This setup compiles the less file, 'app/less/styles.less' into the css file, 'app/css/styles.css'. After that it minifies the css files in the array (in this case there is only one file), ['app/css/styles.css'], into the file, 'app/dist/styles.min.css'. This is the file I include in the html.
This happens when I save a file located in the - watch-section - in this folder/filename, 'app/less/*.less'. All I need to do, is to start the watch task when I start doing development.

Grunt is distributed as a node package so you need to install Node if it is not installed in your system.
If you did not already, create a package.json file, by running:

npm init

(Follow the wizard. Select the appropriate options.)

The following is a summary that shows how to install Grunt in your project.

sudo npm install -g grunt-cli  
(-g for use globally)

From the root folder of your project, write:

sudo npm install grunt --save-dev

Create a gruntfile.js in your root folder, eg.

module.exports = function(grunt) {

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

            //compile the less files into a css file.
            less: {
                compile: {
                    options: {
                        yuicompress: true
                    },
                    files: {
                        'app/css/styles.css' : 'app/less/styles.less'
                    }
                }
            }

            /* minify compiled (less -> css) file. */
            ,cssmin: {
            target: {
                files: {
                    'app/dist/styles.min.css': ['app/css/styles.css']
                }
            }
        }

        ,watch: {
            css: {
                files: 'app/less/*.less',
                tasks: ['less', 'cssmin'],
                options: {
                    livereload: true
                }
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['watch']);
};

(See description in the top for an explanation about what this setup does).

Now, install the grunt functions:

sudo npm install grunt-contrib-less --save-dev  
sudo npm install grunt-contrib-watch --save-dev  
sudo npm install grunt-contrib-cssmin --save-dev

This setup watches for changes to the files defined by the pattern in the 'gruntfile.js'. To make grunt watch for changes write grunt in the terminal:

grunt

You can also use the WebStorm Grunt Window by eg. right clicking the gruntfile.js and select "Show Grunt Tasks". Run the task called watch by double clicking it.

Then, it watches for file changes, so when you save any .less file in the app-folder, or in whatever way you configured it in the gruntfile.js, and compile a css file. This compiled css file is the file we want to link to in our html file.

Menu