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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
浅谈javascript的调试
Jan 28 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
JavaScript实现Excel表格效果
Feb 07 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 MySQL与分页效率
2008/06/04 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php实现的双色球算法示例
2017/06/20 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP实现百度人脸识别
2019/05/06 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python逆序打印各位数字的方法
2018/06/25 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
关于python字符串方法分类详解
2019/08/20 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python数据预处理方式 :数据降维
2020/02/24 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
继承公证书
2014/04/09 职场文书
干部鉴定材料
2014/05/18 职场文书
校庆标语集锦
2014/06/25 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
法律讲堂观后感
2015/06/11 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android