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

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

功能描述

将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)
});