node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

jarvis-less

jarvis-less

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

NPM

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 
    }
}