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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
javascript内存管理详细解析
Nov 11 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
Linux下python制作名片示例
2018/07/20 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python数组循环处理方法
2019/08/26 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
网络安全类面试题
2015/08/01 面试题
小学教研工作制度
2014/01/15 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
银行实习推荐信
2015/03/27 职场文书