本節實現JS壓縮,在實現壓縮前,先配置JS任務,設置源目錄和輸出目錄。
在系列(三)代碼的基礎上,再進行擴展。
1.找到gulp->config.js,對JS進行源目錄(src->img)和輸出目錄(build->img)的配置:
2.gulp->tasks里新建JS任務,如下圖:
3.同時在default任務序列里添加js任務:
gulp.task('default', ['less', 'images', 'js', 'watch']);
4.最后在watch里添加對src->js文件夾的監聽:
watch(config.js.src, function(){ //監聽所有js gulp.start('js'); });
此時運行gulp,src->js文件下的圖片就會被輸出到build->js下,src->js的改動也會被監聽。
(注意,刪除一個JS,雖然會被監聽,但是build->js里卻不會刪除,之后系列會添加另一個任務來解決這個問題,這里也暫時不做)
以上做完后,我們只是做了一個從 src->js 把圖片輸出到 build->js里的任務。現在再添加js壓縮任務:
1.安裝模塊:
npm install --save-dev gulp-uglify
2.壓縮任務:
可以直接插入在JS任務里,但是我們不這樣做,只需要在項目部署時進行壓縮,
我們在deploy任務,用來設置發布項目時需要執行的JS任務
tasks里修改deploy.js,代碼如下:
var gulp = require('gulp'); gulp.task('deploy', ['less', 'uglify', 'imagemin']);
3.最后在tasks文件夾里新建uglify.js:
var uglify = require('gulp-uglify'); var gulp = require('gulp'); var config = require('../config').js; gulp.task('uglify', function(){ return gulp.src(config.src) .pipe(uglify()) .pipe(gulp.dest(config.dest)); });
相比js任務,只是多了一個 壓縮方法 —— pipe(uglify());
保存后,在命名行中運行 gulp deploy
壓縮就執行成功了。
還是那句話多看官方文檔。
>>> github 地址,請選擇 uglify 分支<<<