gulp插件(5) - gulp-less(编译less文件)

原文来自:https://www.jianshu.com/p/e42258b53802

 
 
功能描述
 
 
 
  
将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。
 
 
 
 
 
 
插件安装
 
 
$ cnpm install gulp-less --save-dev

 
 
使用方法
 
 
例1：基本使用
 
 
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');

gulp.task('testLess', function (cb) {
    pump([
        gulp.src('src/less/index.less'),
        less(),
        gulp.dest('src/css')
    ], cb)
});

 
 
例2：编译多个less文件
 
 
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');

gulp.task('testLess', function (cb) {
    pump([
        gulp.src(['src/less/index.less','src/less/detail.less']),
        less(),
        gulp.dest('src/css')
    ], cb)
});

 
 
例3：匹配符“!”，“”，“*”，“{}”
 
 
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');

gulp.task('testLess', function (cb) {
    pump([
        //编译src目录下的所有less文件
        //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
        gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']),
        less(),
        gulp.dest('src/css')
    ], cb)
});

 
 
例4：与插件gulp-clean-css(不会用？请参考)组合使用，实现编译、压缩一步操作
 
 
var gulp      = require('gulp'),
    less      = require('gulp-less'),
    minifyCss = require('gulp-clean-css'),
    pump      = require('pump');

gulp.task('testLess', function (cb) {
    pump([
        gulp.src(['src/less/index.less']),
        less(),           // 编译
        minifyCss(),      // 压缩
        gulp.dest('src/css')
    ], cb)
});