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 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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设计模式 Command(命令模式)
2011/06/26 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
vue中appear的用法
2017/08/17 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
pygame实现非图片按钮效果
2019/10/29 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Python多线程thread及模块使用实例
2020/04/28 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
党课培训主持词
2014/04/01 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
给老婆的保证书
2015/01/16 职场文书
骨干教师个人总结
2015/02/11 职场文书