gulp簡介：

gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；她不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學(xué)習(xí)如何使用Gulp來改變開發(fā)流程，從而使開發(fā)更加快速高效。

gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作。

今天學(xué)習(xí)gulp時(shí)候，用到gulp-uglify壓縮js模塊，遇到的一個(gè)問題-當(dāng)用gulp.watch來監(jiān)聽js文件的變動(dòng)時(shí)出現(xiàn)重復(fù)壓縮的問題

目錄結(jié)構(gòu)如下：

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...');
});

執(zhí)行g(shù)ulp uglify命令后：

也生成了對應(yīng)的*.min.js：

但是當(dāng)我打開一個(gè)kong.js文件重新保存后，會出現(xiàn)下面的情況：

保存一次就會重新壓縮一遍，會出現(xiàn)很多*.min.min...js之類的js壓縮文件，而且只有第一個(gè)kong.min.js值會跟著kong.js改變而改變，后來查了下文檔，別人寫有關(guān)gulp-uglify的內(nèi)容，發(fā)現(xiàn)可以用！來篩除掉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()配合使用時(shí)報(bào)錯(cuò)(重復(fù)壓縮問題)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論