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

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()配合使用时报错(重复压缩问题),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索gulp
, uglify报错
gulp.watch()
gulp uglify、gulp uglify 报错、gulp uglify 参数、gulp uglify 配置、gulp uglify js报错,以便于您获取更多的相关知识。

时间: 2024-08-22 19:13:26

gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)_javascript技巧的相关文章

php5.4传引用时报错问题分析_php技巧

本文实例分析了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($

JavaScript易错知识点整理_javascript技巧

前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点. JavaScript知识点 1.变量作用域 var a = 1; function test() { var a = 2; console.log(a); // 2 } test(); 上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. va

JS保存、读取、换行、转Json报错处理方法_javascript技巧

异常信息:Unexpected token ILLEGAL 先说处理方法: 1.保存: 复制代码 代码如下: varcont=encodeURI($("#txtMessage_Content").val()).replace(/%0A/g,"brHH"); 2.读取: 复制代码 代码如下: entity[i].Contents.replace(/</g,"<").replace(/>/,">").rep

详解前端自动化工具gulp自动添加版本号_javascript技巧

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

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

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

unbound prefix-android 编写主题xml时报错

问题描述 android 编写主题xml时报错 <resources> <style name="AppBaseTheme" parent="android:Theme.Light"> </style> <style name="AppTheme" parent="AppBaseTheme"> <item android:name="android:windowN

用VS写C++时报错“找不到标识符”

  用VS写C++时报错"找不到标识符"          方法/步骤 在程序入口的cpp(有main函数)里这样写.函数A明显是定义过的.但仍然编译不通过 其实原因是这个CPP并没有面向对象的结构.所以进行编译时是"顺序编译"的,而main函数的定义又在A的定义之前.自然找不到标识符了 解决方案.把A函数的定义改到main函数的前面. 成功.

unity3d-Unity3D 实时解析XML时报错

问题描述 Unity3D 实时解析XML时报错 获取网络时间: IEnumerator GetTime() { WWW www = new WWW(timeURL); while (!www.isDone) { yield return www; Debug.Log("Doneeeeeeeeeeeeee" + www.text); ParseXml(www); } }` 后得到:` <?xml version="1.0" encoding="GB23

db2递归结果集作为查询条件时报错

问题描述 db2递归结果集作为查询条件时报错 递归在db2中没有问题,但要是把递归的结果作为查询条件时会报错,如:SELECT T.inst_id FROM BAPP_INST T WHERE exists (select 1 from (WITH area(parent_area_id area_id) AS (SELECT parent_area_id area_id FROM fox_pboc_area WHERE area_simple_name = '廊坊市' UNION ALL SE