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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
js类型检查实现代码
Oct 29 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
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备份/还原MySQL数据库的代码
2011/01/06 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
header导出Excel应用示例
2014/01/24 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
详解Python发送邮件实例
2016/01/10 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python微信公众号开发简单流程实现
2020/03/09 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
模具设计与制造专业应届生求职信
2013/10/18 职场文书
买房子个人收入证明
2014/01/16 职场文书
电大本科自我鉴定
2014/02/05 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP