Gulp&gulp-less

Using the Gulp-less plug-in to compile less files into CSS, when there is less file changes to automatically compile less, and to ensure that less syntax error or exception when the normal operation and prompt error message.

1, Local installation gulp-less

Github:https://github.com/plus3network/gulp-less

Install: Command Prompt executioncnpm install gulp-less --save-dev

Do not install CNPM please npm install gulp-less --save-dev use what is CNPM, how to install?

--save-devSave the configuration information to the Package.json devdependencies node. Why Save to Package.json?

2, Configuration Gulpfile.js

2.1. Basic use

var gulp = require (' Gulp '),    = require (' gulp-less '); Gulp.task (function  ( {    gulp.src (' src/less/index.less '). Pipe (less        ())        . Pipe (Gulp.dest (' src/css ');});

2.2. Compiling multiple less files

var gulp = require (' Gulp '),    = require (' gulp-less '); Gulp.task (function  ( {    gulp.src ([//// Multiple files are passed in as an array         . Pipe (Less ())        . Pipe (Gulp.dest (// });

2.3. Match "!", "*", "* *", "{}"

var gulp = require (' Gulp '),    = require (' gulp-less '); Gulp.task (function  (    {// compile all less files in src directory    // except Reset.less and test.less (* * Match src/ Less 0 or more subfolders)    gulp.src ([' src/less/*.less ', '!src/less/**/{reset,test}.less '])         . Pipe ())        . Pipe (Gulp.dest (' src/css ');});

2.4, call multi-module (compile less after compression CSS)

var gulp = require (' Gulp '),    = require (' gulp-less '),     //  Ensure that GULP-MINIFY-CSS is installed locally [cnpm install gulp-minify-css--save-dev]    cssmin = require (' gulp-minify-css '); Gulp.task (function  () {    gulp.src (' src/less/index.less ')        . Pipe (Less ())         // compatible with IE7 and set the compatibility property below. Pipe (cssmin ({compatibility: ' IE7 '})        . Pipe (Gulp.dest (' src/css ');});

3. Perform tasks

3.1. Command prompt execution:Gulp testless

4. Listen for events (auto compile less)

4.1, if each change less, it is necessary to perform the task manually, it is obviously unreasonable, so when there is a change in the file to automatically compile

var gulp = require (' Gulp '),    = require (' gulp-less '); Gulp.task (function  ( {    gulp.src ([' src/less/*.less ', '!src/less/extend/{reset,test}.less '])        . Pipe (Less ())        . Pipe (Gulp.dest (' src/css ')); Gulp.task (function  () {    Gulp.watch (// ) when all less files are changed, Invoke Testless task });

4.2. Start the Listener event: command prompt execution gulp Testwatch

4.3. Note: The command prompt execution needs to be open, and the listener event ends after shutting down

5. Exception Handling

5.1, when the compile less syntax error or other exception, will terminate the Watch event, usually need to look at the command prompt window to know, this is not what we want, so we need to handle the exception does not terminate the Watch event (Gulp-plumber), And it prompts us to have an error (gulp-notify).

varGulp = require (' Gulp ')), less= Require (' gulp-less '); //Prompt for errors when an exception occurs ensure that Gulp-notify and Gulp-plumber are installed locallyNotify = require (' gulp-notify ')), plumber= Require (' Gulp-plumber '); Gulp.task (' Testless ',function() {GULP.SRC (' Src/less/*.less '). Pipe (Plumber ({errorHandler:notify.onError (' Error: <%= error.message%> ')) . Pipe (Less ()). Pipe (Gulp.dest (' Src/css '));}); Gulp.task (' Testwatch ',function() {Gulp.watch (' Src/**/*.less ', [' testless ']);});

6, Finish.

Gulp&gulp-less