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. hdu 6194 沈阳网络赛--string string string(后缀数组)

    题目链接 Problem Description Uncle Mao is a wonderful ACMER. One day he met an easy problem, but Uncle M ...

  2. 九九乘法表实现---基于python

    # coding:utf-8"""九九乘法表"""for k in range(1,10):    for i in range(1,k+1 ...

  3. 机器学习实战之 第10章 K-Means(K-均值)聚类算法

    第 10 章 K-Means(K-均值)聚类算法 K-Means 算法 聚类是一种无监督的学习, 它将相似的对象归到一个簇中, 将不相似对象归到不同簇中.相似这一概念取决于所选择的相似度计算方法.K- ...

  4. Windows环境下最新OpenCV和Contribute代码的联合编译

    解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 一.工具的准备 1 tortoisegit www.tortoisegit.o ...

  5. 第1阶段——uboot分析之查找命令run_command函数和命令定义过程(6)

    本节主要学习,run_command函数命令查找过程,命令生成过程 1.run_command函数命令查找过程分析:在u-boot界面中(main_loop();位于u-boot-1.1.6/comm ...

  6. 线程高级篇-读写锁ReentrantReadWriteLock

    转载原文:http://blog.csdn.net/john8169/article/details/53228016 读写锁: 分为读锁和写锁,多个读锁不互斥,读锁和写锁互斥,这是有JVM自己控制的 ...

  7. Python的变量参数

  8. Maven第四篇【私有仓库、上传jar包、引用私服jar包、上传本地项目到私服】

    搭建私有服务器 前面已经说过了,我们使用Maven的使用,如果需要导入相对应的jar包,Maven首先会在我们的本地仓库中寻找->私有仓库->中心仓库- 然而,我们的本地仓库常常没有想要的 ...

  9. flex布局常用属性

    最近喜欢flex布局,它可以完美的实现响应式布局,下边我总结了它的一些常用属性,喜欢的,也可以练习写一下,很好用~~~ 注意:使用了flex布局,对于子元素的float.clear和vertical- ...

  10. 使用Pano2VR 切割图片

    图片转换好之后得到一组立方体面片.