Categories

(107)
(51)
(77)
(16)

Configuring Grunt for compiling SASS/LESS to CSS

05.10.2015
Configuring Grunt for compiling SASS/LESS to CSS
Author:

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)

7 votes, Rating: 4

Read also

1

If you want to begin studying Symfony web development, this Symfony2 framework tutorial by our developer could...

2

Hello, everyone! The release of Drupal 8 is almost here, but its beta version is available for use now....

3

In Symfony, there are many console commands to help you in your work. In this article we consider the most frequently used Symfony commands.The tutorial should be very useful for those who are...

4

Happy Tester’s Day to everyone! :) Check out the new blog post on QA testing in BrowserStack from InternetDevels Company...

5

Discover the blog post on social shopping projects in Drupal with some of the best secrets of ...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime