gulp簡(jiǎn)介:
gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;她不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用她,我們不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率。
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器, 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成,并監(jiān)聽(tīng)文件在改動(dòng)后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上,她借鑒了Unix操作系統(tǒng)的管道(pipe)思想,前一級(jí)的輸出,直接變成后一級(jí)的輸入,使得在操作上非常簡(jiǎn)單。通過(guò)本文,我們將學(xué)習(xí)如何使用Gulp來(lái)改變開(kāi)發(fā)流程,從而使開(kāi)發(fā)更加快速高效。
gulp 和 grunt 非常類似,但相比于 grunt 的頻繁 IO 操作,gulp 的流操作,能更快地更便捷地完成構(gòu)建工作。
今天學(xué)習(xí)gulp時(shí)候,用到gulp-uglify壓縮js模塊,遇到的一個(gè)問(wèn)題-當(dāng)用gulp.watch來(lái)監(jiān)聽(tīng)js文件的變動(dòng)時(shí)出現(xiàn)重復(fù)壓縮的問(wèn)題
目錄結(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命令后:
也生成了對(duì)應(yīng)的*.min.js:
但是當(dāng)我打開(kāi)一個(gè)kong.js文件重新保存后,會(huì)出現(xiàn)下面的情況:
保存一次就會(huì)重新壓縮一遍,會(huì)出現(xiàn)很多*.min.min...js之類的js壓縮文件,而且只有第一個(gè)kong.min.js值會(huì)跟著kong.js改變而改變,后來(lái)查了下文檔,別人寫有關(guān)gulp-uglify的內(nèi)容,發(fā)現(xiàn)可以用!來(lái)篩除掉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ù)壓縮問(wèn)題),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注