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系統下)安裝各種插件,總是失敗不知道為什么,希望有大神可以指點一下,謝謝)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM