gulp使用2-gulp-less及watch和错误提示

gulpfile.js 

/**
 * Created by Administrator on 2017/4/4 0004.
 */
const gulp = require('gulp'),
      less = require('gulp-less'),
      cssmin = require('gulp-minify-css'),
      rename = require('gulp-rename'),
      plumber = require('gulp-plumber'),
notify = require('gulp-notify'),
      del = require('del');

//gulp默认任务,执行 gulp 时执行此任务
gulp.task('default', ['clean'], function () {
    gulp.start('lessAndMin');
});

//less 任务--编译一个less文件
gulp.task('oneLess', function () {
    gulp.src('src/less/index.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'))
});
//less 任务--编译多个less文件
gulp.task('moreLess', function () {
    gulp.src(['src/less/index.less', 'src/less/page.less']) //多个less以数组形式传递
        .pipe(less())
        .pipe(gulp.dest('src/css'))
});
//less任务 -- "!" "*" "**" "{}" 匹配符使用
gulp.task('allLess', function () {
//编译src目录下的所有less文件
      //除了test.less和reset.less(**匹配src/less的0个或多个子文件夹)

    gulp.src(['src/less/*.less', '!src/less/**/{test, reset}.less'])
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) //异常处理

.pipe(less())
.pipe(gulp.dest(
'src/css'))
});

//less+压缩(css)任务(调用多模块)
gulp.task('lessAndMin', function () {
gulp.src(
'src/less/index.less')
.pipe(less())
.pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))
.pipe(rename({suffix:
'.xxx.min'})) //这时压缩css文件名字为:原始名字.xxx.min.css
.pipe(gulp.dest(
'src/css')) });
//监听less修改 
gulp.task('lessWatch', function () {
gulp.watch('src/less/**.less', ['allLess']);
});


//删除原有文件
gulp.task('clean', function (cb) {
del([
'src/css/*.css'], cb);
});

异常处理 

 当编译less时出现语法错误或者其他异常,会终止watch事件,通常需要查看命令提示符窗口才能知道,这并不是我们所希望的,

 所以我们需要处理出现异常并不终止watch事件(gulp-plumber),并提示我们出现了错误(gulp-notify)。

 使用说明:当 gulp allLess时 开始监听.less的修改,当修改出现问题的时候

 解决问题修改为 

再次修改 watch会继续运行

原文地址:https://www.cnblogs.com/easyweb/p/6664556.html