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会继续运行

gulp使用2-gulp-less及watch和错误提示的更多相关文章

  1. gulp教程之gulp中文API

    1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...

  2. hello gulp,使用gulp的第一天。

    昨天花了一天的时间,学习了一下gulp,今天整理一下,也分享给朋友们. 首先当然是去gulp的官网逛一圈了: http://gulpjs.com/ 中文站地址: http://www.gulpjs.c ...

  3. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  4. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  5. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  6. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  7. 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  8. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  9. Gulp探究折腾之路(I)

    前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

随机推荐

  1. Maven(一)初识Maven

    前言 在这之前一直都有去看关于Maven的相关介绍,但是没有到真正要用的时候,自己总是以为懂了.其实真的感觉Maven并没有想象的那么简单! 那我们该怎么去学习maven呢?接下来我将从: 初步认识m ...

  2. ButterKnife的安装与使用以及ButterKnife右键不显示的大坑

    作为从安卓的的入门选手,第一次看到还以为是个第三方呢,从github下来之后感觉不对啊,这么多东西,后来一搜原来是个插件,而且不用从github上下载. 安装的方法很简单. 第一步:打开安卓studi ...

  3. poj 1384完全背包

    题意:给出猪罐子的空质量和满质量,和n个硬币的价值和质量,求猪罐子刚好塞满的的最小价值. 思路:选择硬币,完全背包问题,塞满==初始化为无穷,求最小价值,min. 代码: #include<io ...

  4. CloseableHttpClient 源码

    public abstract class CloseableHttpClient implements HttpClient, Closeable { private final Log log = ...

  5. vi/vim键盘图-

    vi/vim键盘图-----又一张桌面背景好图 也许还是有很多人不能愿意用CLI的vi/Vim来写东西,不过,当你真的习惯了,它的高效性就是不可估量了.下面的这张图,一看就明白了,从此,学习变的不再艰 ...

  6. Win8打开chm右侧空白解决方法

    Win8下打开CHM文件,左侧有目录,但是右侧空白.而且打开的时候,还弹出很多IE窗口. 感觉应该不是文件本身的问题.下面是我的解决方法,其他系统也可以试一试. 最初打开文件如下 首先:1,右键关联c ...

  7. Java课程设计--GUI密码生成器201521123033

    1.团队课程设计题目 基于GUI的密码生成器 团队博客链接 2.个人负责模块 (1)界面设计 (2)部分错误输入的提示 (3)一键复制密码功能的实现 3.个人代码的提交记录截图 4.个人代码展示以及代 ...

  8. JAVA多线程高并发学习笔记(三)——Callable、Future和FutureTask

    为什么要是用Callable和Future Runnable的局限性 Executor采用Runnable作为基本的表达形式,虽然Runnable的run方法能够写入日志,写入文件,写入数据库等操作, ...

  9. linux下Nginx配置文件(nginx.conf)配置设置详解(windows用phpstudy集成)

    linux备份nginx.conf文件举例: cp /usr/local/nginx/nginx.conf /usr/local/nginx/nginx.conf-20171111(日期) 在进程列表 ...

  10. 利用ADO让普通人用excel读取oracle数据库表的通用办法

    Ref:http://blog.csdn.net/iamlaosong/article/details/8465177 Excel通过ADO方式连接到Oracle并操作Oracle给那些编程能力不强的 ...