Configuring Grunt for compiling SASS/LESS to CSS

SASS and LESS preprocessors make front-end development much easier. To compile them to CSS automatically, you can use Grunt.js. Let’s see how to do it through the example of Ubuntu OS.

1. sudo apt-get install npm

Install npm (package manager for node.js)

2. sudo npm install -g grunt-cli

Install grunt-cli to run Grunt in any directory if it is there (this command does not install Grunt).

3. npm init

Initialize node in the folder with the theme (or elsewhere), this command will start a dialogue where we:

• give the name to the node project (you can give the theme name);
• specify the version;
• write a description;
• specify Gruntfile.js for entry point;
• test command, git repository, keywords can be left empty;
• author — specify yourself, or leave blank;
• specify the license (BSD-2-Clause by default) ;

Next you'll be asked whether all data is entered correctly, if so — press Enter.

A package.json file will be generated that contains the settings for the project.

4. npm install grunt --save-dev

Install Grunt in the folder with the theme

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

Install grunt-contrib-watch, this package will monitor changes in Sass/Less files.

Next, depending on whether you need to compile Sass or Less, install locally the corresponding modules:

for Sass, install:

npm install grunt-sass --save-dev

or

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

grunt-sass uses the compiler to C ++, so the compilation is very fast (0.9s, 6000+ lines in the css file), grunt-contrib-sass is considered to be more stable (compilation takes 4c, 6000+ lines in the CSS file).

for Less, install:

npm install grunt-contrib-less --save-dev - для less

All installed packages will be written in the dependencies in the package.json file.

5. Next, create Gruntfile.js

Here is a Gruntfile.js example for Sass:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
        options: {
          sourcemap: false,
          compress: false,
          yuicompress: false,
          style: 'expanded',
        },
        files: {
          'css/style.css' : 'sass/style.scss'
        }
      },
    },
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass']
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default',['watch']);
}

Here is a Gruntfile.js example for Less:

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: false,
          yuicompress: false,
          optimization: 2
        },
        files: {
          "css/style.css": "less/style.less"
        }
      }
    },
    watch: {
      styles: {
        files: ['less/**/*.less'],
        tasks: ['less']
      }
    }
  });

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

Explanation of configurations:

sass: { та less: {, where sass and less are the names of the tasks;

'css/style.css' : 'sass/style.scss' and "css/style.css": "less/style.less" is the path to the css file where all the changes will be compiled and the path to the Sass/Less file that will be compiled;

files: '**/*.scss', files: ['less/**/*.less'] — specify which files to track;

tasks: ['sass'], tasks: ['less'] — when changing the files, run the specified task;

grunt.registerTask('default',['watch']); — register the task;

grunt.loadNpmTasks('grunt-contrib-sass'), grunt.loadNpmTasks('grunt-contrib-watch') — add the modules, in the example with less jit-grunt has been used (the module that optimizes the uploading of the modules), so the specified lines are not found there.

6. All is done, go to the folder where you have installed Grunt and run it:

if you have received an error of the following type “/usr/bin/env: node: No such file or directory” — sudo ln -s /usr/bin/nodejs /usr/bin/node.

If you have received a Drupal error "Segmentation fault" — delete all files from the node_modules folder that have an extension .info - find . -name "*.info" -type f -delete.

7. If you already have Grunt installed and you just want to run it

— if necessary, follow steps 1, 2 and go to step 6.

Useful links on using Grunt for compiling SASS/LESS to CSS

http://gruntjs.com/getting-started

https://github.com/sindresorhus/grunt-sass (quick plugin to compile Sass)

https://github.com/gruntjs/grunt-contrib-sass (plugin to compile Sass)

https://github.com/gruntjs/grunt-contrib-less (plugin for Less)

https://www.npmjs.com/package/jit-grunt (plugin for optimizing the plugin loading)

https://github.com/gruntjs/grunt-contrib-coffee (plugin to compile coffee script to js)

https://github.com/esteinborn/bootstrap-sass-grunt (Bootstrap Sass for Grunt)

http://stackoverflow.com/questions/26320901/cannot-install-nodejs-usr-bin-env-node-no-such-file-or-directory (about the /usr/bin/env: node: No such file or directory error)

https://www.drupal.org/node/2309023 (about the Segmentation Fault error)