jarvis-less

Completed, easy to use, gulp task for compiling less to css.

Installation

npm i --save-dev jarvis-less

Usage

I tried to do usage of this task as simple as posible. The following example will compile all the *.entry.less files under the folder src/ into to destination folder dist/, and rename it all from *.entry.less to *.bundle.css

var gulp = require('gulp');
var less = require('./index');

gulp.task('less:build', less.build({
    entry: 'src/**/*.entry.less',
    output: 'dist/',
}));

gulp.task('less:watch', ['less:build'], () => {
    gulp.watch('src/**/*.{entry.less, less, css}', () => {
        gulp.run('less:build');
    });
});

gulp.task('less:clean', less.clean('test/dist'));

So we had the folowing file tree:

 src/
     style.entry.less
     common.entry.less

after running less:build (or less:watch if you want to watching changes), we will have:

 src/
     style.entry.less
     common.entry.less
 dist/
     style.bundle.css
     common.bundle.css

Jarvis

But the killer-feature of this task is gulp-jarvis. With help of this plugin we can easily redeclare the destination folder by adding a special comment line to the beginning of the entry file. So let's go back to the previous example:

 src/
     style.entry.less
     common.entry.less

Lets change the contents of the file style.entry.less a little bit. We will add the following line to the beginning of style.entry.less /*file-output:dist/style/style.css;*/

And after this we run less:build again, at the output we will have:

 src/
     style.entry.less
     common.entry.less
 dist/
     common.bundle.css
     style/
         style.css
         

See, its so easy.

Options

The API of the package has only one method:

less.build(options)

defaultOptions = {
{
    entry: `src/**/*.entry.less`, // source glob for gulp.src(...)
    output: 'dist/css/', //default destination folder
    development: true, //flag for minification and sourcemaps 
    plugins: {
        'autoprefixer': undefined, //gulp autoprefixer options
        'less': undefined, //gulp-less
        'clean': undefined, //gulp-clean-css
    }
}