gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)


Posted in Javascript onAugust 24, 2016

gulp简介:

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

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题

目录结构如下:

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

gulpfile.js代码如下:

var gulp = require('gulp');
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename');
gulp.task('uglify', function() {
gulp.src('./src/js/*.js')
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./src/js'));
});
var watcher = gulp.watch('./src/js/*.js', ['uglify']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

执行gulp uglify命令后:

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

也生成了对应的*.min.js:

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

但是当我打开一个kong.js文件重新保存后,会出现下面的情况:

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

保存一次就会重新压缩一遍,会出现很多*.min.min...js之类的js压缩文件,而且只有第一个kong.min.js值会跟着kong.js改变而改变,后来查了下文档,别人写有关gulp-uglify的内容,发现可以用!来筛除掉min.js,不让它压缩,更改后的代码:

var gulp = require('gulp');
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename');
gulp.task('uglify', function() {
gulp.src(['./src/js/*.js','!./src/js/*.min.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./src/js'));
});
var watcher = gulp.watch('./src/js/*.js', ['uglify']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

以上所述是小编给大家介绍的gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 #Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 #Javascript
AngularJS下对数组的对比分析
Aug 24 #Javascript
AngularJS  $modal弹出框实例代码
Aug 24 #Javascript
AngularJS中比较两个数组是否相同
Aug 24 #Javascript
javascript深拷贝(deepClone)详解
Aug 24 #Javascript
js实现无缝循环滚动
Jun 23 #Javascript
You might like
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
基于python指定包的安装路径方法
2018/10/27 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
幼儿教师考核制度
2014/01/25 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
单位在职证明书
2014/09/11 职场文书
医德考评自我评价
2014/09/14 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
大学生暑期实践报告
2015/07/13 职场文书
会议新闻稿
2015/07/17 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
详细分析PHP7与PHP5区别
2021/06/26 PHP
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle