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的类型简单说明
Sep 03 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
js中日期的加减法
May 06 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
详解iframe与frame的区别
Jan 13 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
详解Python编程中基本的数学计算使用
2016/02/04 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python实现排序算法解析
2018/09/08 Python
Python自动抢红包教程详解
2019/06/11 Python
Django对models里的objects的使用详解
2019/08/17 Python
python做接口测试的必要性
2019/11/20 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
如何保障Web服务器安全
2014/05/05 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
优秀村官事迹材料
2014/01/10 职场文书
医院合作协议书
2014/08/19 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android