gulp-uglify《JS壓縮》----gulp系列(四)


本節實現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  分支<<<

 


免責聲明!

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



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