gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题

今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题

目录结构如下

gulpfile.js代码如下:

 1 var gulp = require(‘gulp‘);
 2 var uglify = require(‘gulp-uglify‘);
 3 var rename = require(‘gulp-rename‘);
 4
 5 gulp.task(‘uglify‘, function() {
 6     gulp.src(‘./src/js/*.js‘)
 7         .pipe(rename({suffix:‘.min‘}))
 8         .pipe(uglify())
 9         .pipe(gulp.dest(‘./src/js‘));
10 });
11
12
13 var watcher = gulp.watch(‘./src/js/*.js‘, [‘uglify‘]);
14 watcher.on(‘change‘, function(event) {
15   console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
16 });

执行gulp uglify命令后:

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

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

保存一次就会重新压缩一遍,会出现很多*.min.min...js之类的js压缩文件,而且只有第一个kong.min.js值会跟着kong.js改变而改变,后来查了下文档,别人写有关gulp-uglify的内容,发现可以用!来筛除掉min.js,不让它压缩,更改后的代码:

 1 var gulp = require(‘gulp‘);
 2 var uglify = require(‘gulp-uglify‘);
 3 var rename = require(‘gulp-rename‘);
 4
 5
 6 gulp.task(‘uglify‘, function() {
 7     gulp.src([‘./src/js/*.js‘,‘!./src/js/*.min.js‘])
 8         .pipe(rename({suffix:‘.min‘}))
 9         .pipe(uglify())
10         .pipe(gulp.dest(‘./src/js‘));
11 });
12
13
14 var watcher = gulp.watch(‘./src/js/*.js‘, [‘uglify‘]);
15 watcher.on(‘change‘, function(event) {
16   console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘);
17 });

其实就改了上面红色的那句代码,就解决了这个问题,可能这个问题很小,不过是自己学gulp的第一个问题,写篇博客纪念一下^.^有什么不对的,请大神指正,谢谢

(后面还遇到一个问题没有解决,拷贝别人的package.json配置文件,用npm install命令(window系统下)安装各种插件,总是失败不知道为什么,希望有大神可以指点一下,谢谢)

时间: 2024-11-04 23:41:40

gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题的相关文章

gulp 报"import gulp from 'gulp'"的错解决方案

在执行gulp serve时 gulp serve 当前的node版本不支持es6新语法 所以需要一个编译转换器----babel Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码. 第一步:如果在package.json中增加一个 第二步:新建一个文件.babelrc 把下面这段文本添加到.babelrc文件中去 { "env": { "production": { "plugins": ["transform-

gulp教程之gulp中文API

简介: 本文主要翻译gulp官方API,加上自己一点点拙解. gulp API docs 1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件: 1.2.globs:  需要处理的源文件匹配符路径.类型(必填):String or StringArray: 通配符路径匹配示例: “src/a.js”:指定具体

gulp 入门---使用gulp压缩css

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 二.创建 gulpfile.js 文件编写代码 在对应目录创建 gulpfile.js 文件并

jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑": 1:Draggable 的clone  属性. 2:Droppable 接受拖拽控件的定位问题(拖到哪,就放在哪) 首先是第一个"坑",在做一些类似编辑器的东西时需要我们实现类似拖拽控件的功能,即从 "工具栏" 拖到 "编辑栏".这就需要用到 clone属性,在使用这个属

C#的兰姆达表达式与委托配合使用时的一些问题

大家应该都是知道,C#的委托+=和-=都是根据函数的签名来识别的,但是如果符号的右边是一个兰姆达表示式(例如:delegate0+=()=>{}),这个时候怎么判断右边的函数是不是同一个呢? 写个例子来测试一下,如下图,运行两次Test方法,传递的参数都是一样的兰姆达表达式,通过action委托的-=并没有将看起来一样的兰姆达表达式函数去除,为什么呢?(当然如果是传递两个确切的函数名就会最终只打印一行"hello world",读者可自行测试), 我们来断点调试一下:可以看出运行

执行 $ Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html Gulp 概述 Gulp 是一个构建工具,通过自动化处理

gulp 开发时常用的命令

项目开发中,管理代码gulp工具,其中常用的命令有 1.提交代码  git add .   //提交所有文件 git commit -m "解决的bug描述" git pull origin develop(当前的分支) //拉改动的代码 git  push origin develop  //把代码推上去 2.分支 1)新建分支  git branch Release(新建的分支) 2)切换分支  git checkout develop (切换到develop分支) 3)合并分支

gulp学习笔记1 uglify

作用:Minify JavaScript var gulp = require('gulp') var uglify = require('gulp-uglify') gulp.task('default',function () { gulp.src('app/js/*.js') .pipe(uglify()) .pipe(gulp.dest('app/minjs')) }) 原文地址:https://www.cnblogs.com/ybleeho/p/8444610.html

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &