細說gulp

時間 2019-11-30

標籤細說 gulp 欄目 JavaScript 简体版

原文原文鏈接

1、概述&安裝

Gulp，簡而言之，就是前端自動化開發工具，利用它，咱們能夠提升開發效率。css

好比：html

　　一、壓縮js前端

　　二、壓縮cssnode

　　三、壓縮lessnpm

　　四、壓縮圖片gulp

　　等等…less

咱們徹底能夠利用Gulp來自動化地完成這些重複性很強的工做。ide

好了，廢話很少說了。既然要了解Gulp，就得先安裝它。函數

Gulp是基於node來實現的，so你得先有個node環境（見「初探nodeJS」）。工具

node環境有了後，安裝Gulp就很easy咯。

命令行中，輸入npm install gulp –g就OK啦。（-g表明全局）。

以下：

安裝完成後，輸入gulp –v查看是否安裝成功。

以下：

但，就算你這麼安裝了全局gulp，你每次到項目中時，還得在相應目錄下安裝gulp。

緣由就是，gulp就這麼設置的，避免發生版本衝突。

因此這步安裝gulp能夠可無，不過就當初步瞭解它嘛。

2、小試牛刀之壓縮Javascript

由於gulp是自動化工具，因此咱們得告訴它，須要怎麼作，才能達到咱們的目的。

咱們首先得新建一個js文件，用來編寫咱們的需求，以便gulp能按着咱們的意願來執行。

如，我將這個js文件取名叫gulpfile( 且必須取爲gulpfile名，不然在node環境下運行是，會報錯：No gulpfile found)，並放置在D盤中的gulp文件夾裏。

隨後，打開新建的gulpfile.js，開始咱們的壓縮JavaScript之路吧。

gulp做爲node的一個模塊，因此，第一步咱們得在gulpfile.js裏引入gulp這個模塊。

以下：

接着，由於咱們這次的目的是壓縮JavaScript，因此還得引入一個壓縮Javascript的模塊（gulp-uglify）

以下：

最後，就是具體編寫咱們的需求了。

如個人需求是，將script文件夾中的JavaScript文件壓縮到newScript文件夾中。

具體代碼以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模塊，用於壓縮JS
var uglify = require('gulp-uglify');
//'firstScript'爲咱們自定義的任務名，匿名函數爲'firstScript'具體任務
gulp.task('firstScript', function(){
    // 'script/*.js'是即將壓縮的js文件
    gulp.src('script/*.js')
        //uglify()是調用的壓縮方法，去壓縮js
        .pipe(uglify())
        //gulp.dest是將壓縮後的文件另存爲哪的方法，如存到newScript文件夾中
        .pipe(gulp.dest('newScript'));        
});

EntireCode

好了，在node環境下運行上述代碼，不過不是利用node哈，由於是gulp，因此得用gulp命令，以下（’firstScript’爲剛纔自定義的任務名）：

敲擊回車，執行：

可是，報錯。

緣由：咱們就沒有將gulp、gulp-uglify這兩個模塊到本地嘛。

咦，gulp，咱們不在前面安裝了麼？安裝的全局gulp呢

是的，是安裝了，可是大概爲了不gulp的版本衝突吧，因此咱們還得安裝，因此全局安裝沒卵用。

請在命令中輸入npm install gulp和npm install gulp-uglify安裝它們。安裝好後，會發如今相應目錄下會多出個node_modules的文件夾，裏面就涵蓋了咱們安裝的模塊。

另外，再在script文件夾中加入一段js代碼用來測試壓縮效果，如：

function hello(){
    console.log('hello world');
};

好了，再次運行上述代碼。

得下圖：

Perfect！！這就壓縮好了，咱們在script文件夾中發現多了一個newScript文件夾，且，裏面有壓縮好的js文件哦。

截取壓縮好的js以下：

但，不知道你們發現上述的代碼有個不足沒？

若是文件改變了，咱們每次都得本身手動在node環境下，輸入gulp + 相應任務名執行操做。

說好的自動化呢？

因此咱們得修改上述代碼，讓其自動化--一旦script文件下的js文件變更，就本身自行壓縮。

利用gulp.watch方法，可監聽文件，來彌補這一不足，如：在這裏監聽script下的js文件。（一旦變化，就自動壓縮)

以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模塊，用於壓縮JS
var uglify = require('gulp-uglify');
//'firstScript'爲咱們自定義的任務名，匿名函數爲'firstScript'具體任務
gulp.task('firstScript', function(){
    // 'script/*.js'是即將壓縮的js文件
    gulp.src('script/*.js')
        //uglify()是調用的壓縮方法，去壓縮js
        .pipe(uglify())
        //gulp.dest是將壓縮後的文件另存爲哪的方法，如存到newScript文件夾中
        .pipe(gulp.dest('newScript'));        
});
//新增一個auto任務
gulp.task('auto', function(){
    //利用watch方法監聽script下的js文件，若是變更，則執行firstScript任務
    gulp.watch('script/*.js', ['firstScript']);
});

EntireCode

執行上述，只需在node環境下輸入gulp auto就OK啦，一旦script文件下的js文件改變，它就自動壓縮。

且，由於是監聽，因此當輸入gulp auto時，不會首先壓縮一遍script下js文件。

But，咱們不還得輸入’auto’這個任務名嗎？！！

因此，爲了更加完善，咱們能夠這麼作：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模塊，用於壓縮JS
var uglify = require('gulp-uglify');
//'firstScript'爲咱們自定義的任務名，匿名函數爲'firstScript'具體任務
gulp.task('firstScript', function(){
    // 'script/*.js'是即將壓縮的js文件
    gulp.src('script/*.js')
        //uglify()是調用的壓縮方法，去壓縮js
        .pipe(uglify())
        //gulp.dest是將壓縮後的文件另存爲哪的方法，如存到newScript文件夾中
        .pipe(gulp.dest('newScript'));        
});
//新增一個auto任務
gulp.task('auto', function(){
    //利用watch方法監聽script下的js文件，若是變更，則執行firstScript任務
    gulp.watch('script/*.js', ['firstScript']);
});
//將須要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務
gulp.task('default',['auto']);

EntireCode

注：default任務名不能改變哦。

這樣咱們就能夠直接在node環境下：gulp + 回車，去執行default中的相關任務。

但，上述代碼仍是不夠完美，且不足還很大，就是：當gulp.watch方法監聽到script文件夾中的某個js代碼發生改變時，gulp會將script下全部的js都壓縮一遍，極大地影響性能。(不信，本身能夠測試下)

納尼？這可如何是好。

不用怕，利用gulp-watch-path這個模塊，就能夠作到修改了什麼，就實時壓縮對應文件，而不是盲目地全壓縮。

代碼以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模塊，用於壓縮JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//'firstScript'爲咱們自定義的任務名，匿名函數爲'firstScript'具體任務
gulp.task('firstScript', function(){
    // 'script/*.js'是即將壓縮的js文件
    gulp.src('script/*.js')
        //uglify()是調用的壓縮方法，去壓縮js
        .pipe(uglify())
        //gulp.dest是將壓縮後的文件另存爲哪的方法，如存到newScript文件夾中
        .pipe(gulp.dest('newScript'));        
});
//新增一個auto任務
gulp.task('auto', function(){
    //利用watch方法監聽script下的js文件，若是變更，則執行firstScript任務
    //gulp.watch('script/*.js', ['firstScript']);
    //event爲gulp.watch回調函數中的event
    gulp.watch('script/*.js', function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
            .pipe(uglify())
            //paths.distDir爲目錄文件，若是換成paths.distPath，會報錯：file already exists
            .pipe(gulp.dest(paths.distDir));
    });
});
//將須要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務
gulp.task('default',['auto']);

EntireCode

上述代碼已經很完美了，可是壓縮的文件名與沒壓縮的文件名同樣滴，總感受怪怪的，不是麼？一般壓縮文件應該帶有min的後綴吧。因此咱們再來修改修改。

引入gulp-rename這個模塊，用於重命名壓縮後的文件。

代碼以下：

//引入gulp
var gulp = require('gulp');
//引入gulp-uglify模塊，用於壓縮JS
var uglify = require('gulp-uglify');
//引入gulp-watch-path
var watchPath = require('gulp-watch-path');
//引入gulp-rename
var rename = require('gulp-rename');
//'firstScript'爲咱們自定義的任務名，匿名函數爲'firstScript'具體任務
gulp.task('firstScript', function(){
    // 'script/*.js'是即將壓縮的js文件
    gulp.src('script/*.js')
        //uglify()是調用的壓縮方法，去壓縮js
        .pipe(uglify())
        //給壓縮後的文件，添加min後綴名
        .pipe(rename({suffix: '.min'}))
        //gulp.dest是將壓縮後的文件另存爲哪的方法，如存到newScript文件夾中
        .pipe(gulp.dest('newScript'));        
});
//新增一個auto任務
gulp.task('auto', function(){
    //利用watch方法監聽script下的js文件，若是變更，則執行firstScript任務
    //gulp.watch('script/*.js', ['firstScript']);
    //event爲gulp.watch回調函數中的event
    gulp.watch('script/*.js', function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
            .pipe(uglify())
            //給壓縮後的文件，添加min後綴名
            .pipe(rename({suffix: '.min'}))
            //paths.distDir爲目錄文件，若是換成paths.distPath，會報錯：file already exists
            .pipe(gulp.dest(paths.distDir));
    });
});
//將須要默認執行的任務名，添加到default任務中，如，添加上面的‘auto’任務
gulp.task('default',['auto']);