DIV CSS 佈局教程網

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()配合使用時報錯(重復壓縮問題)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！