zoukankan      html  css  js  c++  java
  • 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会继续运行

  • 相关阅读:
    面试遇到的问题汇总
    linux系统的安装和配置
    apache重写URL时,排除静态资源
    WordPress限制游客查看文章
    Mysql主从复制读写分离
    Postgres主从
    django-rest-framework-simplejwt
    JavaWeb项目部署到Linux服务器
    Centos8.2云服务器环境安装Tomcat8.5
    java的pdf转jpg
  • 原文地址:https://www.cnblogs.com/easyweb/p/6664556.html
Copyright © 2011-2022 走看看