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文件
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和错误提示的更多相关文章
- gulp教程之gulp中文API
1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...
- hello gulp,使用gulp的第一天。
昨天花了一天的时间,学习了一下gulp,今天整理一下,也分享给朋友们. 首先当然是去gulp的官网逛一圈了: http://gulpjs.com/ 中文站地址: http://www.gulpjs.c ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- Gulp探究折腾之路(I)
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
随机推荐
- .net基础第一天
.net基础 <head>+控制类标签 +<head> 1 <body>+网页要显示的内容+</body> <body +空格+bgcolor= ...
- ln命令详解
ln命令 (全称:link) ln命令用来为文件创建一个连接,类似于Windows的快捷方式,连接类型分为硬连接和软连接(符号连接)两种,默认的连接类型是硬连接.如果要创建符号连接必须使用" ...
- poj 3177-3352边双联通
买一送一啊 3177和3352的区别在于3177数据有重边!但是我先做3177的 那么就直接ctrl+c+v搞3352了~. 题意:给一个无向图,要令每个点之间至少有两条不重合的路,需要至少加多少 ...
- JUnit 3.8.1 源码学习
JUnit 3.8.1 源码学习 环境搭建(源码加载配置) 由于IDE自身含有JUint插件,因此通过正常途径是没有源码加载入口的,因此需通过手动加载扩展JAR,然后再添加对应源码JAR,如图:项目右 ...
- java中System.getProperty()的作用及使用
Java中给我们提供了System.getProperty()这个函数,这个函数可以获取到JavaJVM以及操作系统的一些参数,可以供程序判断等. System.getProperty()方法中需要传 ...
- 软工+C(2017第5期) 工具和结构化
// 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 工具/轮子 软件工程/计算机相关专业的一个特点是会使用到众多的工具,工具的使用是从程序猿进化到程序员的一个关键要素.软件工程师 ...
- 第二次项目冲刺(Beta阶段)--第二天
一.站立式会议照片 二.项目燃尽图 三.项目进展 功能模块的代码编写完成,界面布局规划已经定型,不会有大的修改,接下去就是主要解决存在的bug以及各种测试. 队员 ID 贡献比 王若凡 201421 ...
- JAVA2015086第十一周作业
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了 ...
- Eclipse rap 富客户端开发总结(6) : 如何发布rap到tomcat
1.先下载以来的打包插件 war products 输入下面的地址,选择相应的插件 新建一个 war product Configutation向导 下面的war product Configut ...
- Linux下的定时任务 - Cron服务
最近搞咕自己的笔记系统,虽然现在是个人的使用,对于数据库的数据还是比较少,但是安全还是一个我必须注意的东西. (特别是前段时间中了比特币的病毒之后,更是让我关注了我的主机的安全的问题.) 今天的随记是 ...