gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

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文件的变动时出现重复压缩的问题

目录结构如下：

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命令后：

也生成了对应的*.min.js：

但是当我打开一个kong.js文件重新保存后，会出现下面的情况：

保存一次就会重新压缩一遍，会出现很多*.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()配合使用时报错(重复压缩问题)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • gulp-htmlmin压缩html的gulp插件实例代码

    通过一条命令用Npm安装gulp-htmlmin: npm install gulp-htmlmin --save-dev 安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门压缩html,并对html进行一系列的处理: var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); gulp.task('html',function(){ var options = { collapseWhitesp

  • 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    安装 node.js 首先需要安装 node.js, 通常情况下,只需要到 Node.js 官网下载安装包安装就可以了.不过我可耻的失败了,弹出了如下错误: 于是我换成了 brew 大法: brew install nodejs 安装 Gulp gulp 使用 Node.js 的 npm 命令安装: npm install --global gulp 然后在项目目录中还要安装一遍: npm install --save-dev gulp 我对这步的操作比较费解.以我多年码农经验,即然全局安装过了

  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的

  • gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)

    gulp简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.

  • innodb_index_stats导入备份数据时报错表主键冲突的解决方法

    故障描述 percona5.6,mysqldump全备份,导入备份数据时报错Duplicate entry 'hoc_log99-item_log_27-PRIMARY-n_diff_pfx01' for key 'PRIMARY' 故障原因 查看了下这个主键应该是MySQL系统库下的系统表innodb_index_stats mysql> show create table innodb_index_stats\G *************************** 1. row ****

  • Oracle环境通过SQL*PLUS本地登录时报错的解决过程

    一. 问题描述 今天在新机子(WINDOWS)上搭建Oracle环境,完了之后通过SQL*PLUS本地登录时报错: ora-01031 insufficient privileges ---权限不足 二. 解决过程 错误排除 1. 当时首先想到的是oracle不允许用sqlplus工具登录,但随即想法打消 sqlplus sys/admin as sysdba –成功登录! sqlplus sys/admin as sysdba --成功登录! 2. 带详细信息指定本机IP和实例登录 sqlpl

  • Python 使用os.remove删除文件夹时报错的解决方法

    Python 使用os.remove删除文件夹时报错的解决方法

    os.remove不能用来删除文件夹,否则拒绝访问. # -*- coding:utf-8 -*-import osif __name__ == "__main__": os.remove('D:\\test') 运行结果: 删除空目录: # -*- coding:utf-8 -*-import osif __name__ == "__main__": os.rmdir('D:\\test') 如果目录不为空会报错,如下: 删除目录(不论目录是否为空): # -*-

  • php5.4传引用时报错问题分析

    本文实例分析了php5.4传引用时报错问题.分享给大家供大家参考,具体如下: php5.3系列版本以及以前版本,传引用没有什么问题,升级到php5.4以后,传引用的地方,全报错 Fatal error: Call-time pass-by-reference has been removed in F:\work\wamp\www\test\test.php on line 6.看一下下面的例子. 例1,递归传引用,在php 5.3及以及版本,测试结果 <?php function test($

  • NodeJS连接MongoDB数据库时报错的快速解决方法

    NodeJS连接MongoDB数据库时报错的快速解决方法

    今天第一次尝试连接MongoDB数据库,具体步骤也很简单. 首先,通过NodeJS运行环境安装MongoDB包,进入要安装的目录,执行语句 npm install mongodb安装成功后,通过如下语句测试与数据库建立连接几关闭数据库 var mongo = require('mongodb'); var host = "localhost"; var port = mongo.Connection.DEFAULT_PORT; //创建MongoDB数据库所在服务器的Server对象

  • centos7防火墙导致java程序访问mongodb3.0.1时报错的问题分析

    环境描述: 数据库:mongodb3.0.1 数据库系统:centos7,(虚拟机,最小安装) 数据库驱动:mongo-Java-driver-3.0.0.jar 问题描述:shell环境下用mongo客户端程序能正常连接mongod,但java程序始终报错. 查看centos7的官方文档,知道centos7最小安装默认只安装防火墙的动态配置规则服务(firewalld),静态配置规则服务(iptables与ip6tables)需要另行安装. 1.关闭firewall: systemctl st

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • MySQL存储表情时报错：java.sql.SQLException: Incorrect string value:‘\xF0\x9F\x92\xA9\x0D\x0A...’的解决方法

    前言 本文主要介绍了关于MySQL存储表情报错:java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\xA9\x0D\x0A...'的相关解决方法,分享出供大家参考学习,下面话不多说了,来一起看看详细的介绍: 本项目是基于Spring MVC + MySQL + Druid DataSource.在往数据库插入表情Emoji字符时报错: java.sql.SQLException: Incorrect string value:

  • 解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题

    最近小编在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述:使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:error:Bootstrap dropdown require Popper.js bootstrap代码(只要是含dropdown部件的都可以啦)为: <ul class="nav nav-tabs"> <li class="nav-ite

随机推荐