gulp-sources-less

A LESS plugin for Gulp based on the excellent gulp-less with added support for vinyl-sources

Installation

npm install gulp-sources-less

Basic Usage

var less = require('gulp-sources-less');
var path = require('path');

gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

Options

The options you can use can be found here. Below is a list of valid options as of the time of writing:

• paths: Array of paths to be used for @import directives
• plugins: Array of less plugins (details)

The filename option is not necessary, it's handled automatically by this plugin. The compress option is not supported -- if you are trying to minify your css, use gulp-minify-css. No sourceMap options are supported -- if you are trying to generate sourcemaps, use gulp-sourcemaps.

Minifying CSS

If you want to minify/compress your css, you can use either the gulp-minify-css plugin for gulp, or the less-clean-css plugin for less. Examples of both are shown below:

// Using a less plugin to minify css
var LessPluginCleanCSS = require('less-plugin-clean-css'),
    cleancss = new LessPluginCleanCSS({ advanced: true });

gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [cleancss]
  }))
  .pipe(gulp.dest('./public/css'));

// Using a gulp plugin to minify css
var minifyCSS = require('gulp-minify-css');

gulp.src('./less/**/*.less')
  .pipe(less())
  .pipe(minifyCSS())
  .pipe(gulp.dest('./public/css'));

Using Plugins

Less now supports plugins, which can add additional functionality like minifying css as shown above. Here's an example of how to use plugins with gulp-sources-less using both the clean-css plugin and the autoprefix plugin.

var LessPluginCleanCSS = require('less-plugin-clean-css'),
    LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    cleancss = new LessPluginCleanCSS({ advanced: true }),
    autoprefix= new LessPluginAutoPrefix({ browsers: ["last 2 versions"] });

gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix, cleancss]
  }))
  .pipe(gulp.dest('./public/css'));

More info on LESS plugins can be found at http://lesscss.org/usage/#plugins, including a current list of all available plugins.

Source Maps

gulp-sources-less can be used in tandem with gulp-sourcemaps to generate source maps for your files. You will need to initialize gulp-sourcemaps prior to running the gulp-sources-less compiler and write the source maps after, as such:

var sourcemaps = require('gulp-sourcemaps');

gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./public/css'));

By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the sourcemaps.write() function, as such:

var sourcemaps = require('gulp-sourcemaps');

gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

Error Handling

By default, a gulp task will fail and all streams will halt when an error happens. To change this behavior check out the error handling documentation here