Gulp--less

Summary:

Previously shared some less is the method, including in grunt, today under sharing with gulp to compile the less file. First need to install Gulp, how to install please read the article.

To install the plugin:

Gulp compile less uses the Gulp-less module, so the Package.json is as follows:

{    "name": "Gulp-less",    "version": "1.0.0",    "private": True,    "description": "Gulp-less",    "main" : "Gulpfile.js",    "dependencies": {},    "Devdependencies": {        "gulp": "~3.5.6",        "gulp-less": "1.3.6",        "Gulp-minify-css": "~0.3.0",        "Gulp-concat": "~2.4.0",        "Gulp-rename": "~1.2.0"    },    " Keywords ": [" Gulp "," gulp-less "," less "],    " author ":" ",    " license ":" ISC "}

After installation, create a new gulpfile.js, file structure:

Gulpfile.js

Public

?| -->?less

Gulpfile.js:

varGulp = require (' Gulp ')), less= Require (' gulp-less '), Concat= Require (' Gulp-concat '), rename= Require (' Gulp-rename '), Minifycss= Require (' Gulp-minify-css '); Gulp.task (' Build-less ',function() {GULP.SRC ('./public/less/*.less '). Pipe (Less ({compress:true}). On (' Error ',function(e) {console.log (e);}) . Pipe (Gulp.dest ('./public/css/'));});//merging, compressing, renaming CSSGulp.task (' Min-styles ', [' build-less '),function() {GULP.SRC (['./public/css/*.css ']). Pipe (Concat (' All.css '))//merge files to All.css. Pipe (Gulp.dest ('./public/css/'))//Output All.css file. Pipe (rename ({suffix: '. Min '}))//Rename all.css to All.min.css. Pipe (Minifycss ())//Compress CSS Files. Pipe (Gulp.dest ('./public/css/'));//Output All.min.css}); Gulp.task (' Develop ',function() {Gulp.watch ('./public/less/*.less ', [' build-less ', ' min-styles ']);});

In the current directory, execute through the command window

Gulp Build-less: You will find in the public/css/directory that the less file under the less directory is compiled into the corresponding CSS file.

Gulp Min-styles: The All.css and all.min.css files will be exported in the CSS directory.

Gulp Develop: All less files are monitored, and when less files are changed, build-less and Min-styles are executed

Gulp--less