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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
javascrip关于继承的小例子
May 10 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
jQuery实现高级检索功能
May 28 jQuery
JS定时器如何实现提交成功提示功能
Jun 12 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生成EAN_13标准条形码实例
2013/11/13 PHP
php绘制一条弧线的方法
2015/01/24 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
用js重建星际争霸
2006/12/22 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python 如何查找特定类型文件
2020/08/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
2014年高三毕业生自我评价
2014/01/11 职场文书
个人委托书怎么写
2014/09/17 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
博士生专家推荐信
2015/03/25 职场文书
上课迟到检讨书范文
2015/05/06 职场文书