項目自動化構建工具 - gulp

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。

使用gulp前需要安裝node，npm。

一、安裝gulp：

1、全局安裝gulp

npm install gulp -g

2、局部安裝（項目內）

npm install gulp --save-dev

二、gulp項目配置文件

在項目下新建 gulpfile.js

配置基本內容：

var gulp = require('gulp');


// 註冊一個任務
gulp.task('taskName', function(){
    console.log('執行回調')
})


// 默認任務，執行gulp時自動執行
gulp.task('default',function(){
    console.log('執行回調')
});

運行默認任務：

gulp default    // 默認任務 default可以省略
gulp

運行自定義的任務

gulp taskName

三、合併壓縮 js

壓縮 js文件需要安裝gulp插件：gulp-uglify

npm install gulp-uglify --save-dev

合併 js文件需要安裝gulp插件： gulp-concat

npm install gulp-concat --save-dev

合併壓縮 js文件的配置：

var gulp = require('gulp');
var uglify = require('gulp-uglify');    // js壓縮插件
var concat = require('gulp-concat');    // 合併插件
var rename = require('gulp-rename');    // 重命名插件




// 註冊js合併壓縮任務
gulp.task('js', function(){
    return gulp.src('js/**/*.js')            // 引入 js/**/下的所有需要壓縮的js文件
        .pipe(concat('build.js'))            // 合併後的命名
        .pipe(gulp.dest('dist/js/'))         // 合併後的輸出路徑
        .pipe(uglify())                      // 執行壓縮
        .pipe(rename({ suffix: '.min' }))    // 壓縮後的名稱，拓展壓縮後的後綴添加 .min
        .pipe(gulp.dest('dist/js/'))         // 合併壓縮後的輸出路徑（會繼承以上管道的內容）
});


// 默認任務
gulp.task('default',['js']);

四、合併壓縮css。gulp-clean-css 和 gulp-minify-css 皆可

合併壓縮css文件需要安裝的gulp插件（合併後壓縮）：gulp-clean-css

npm install gulp-clean-css --save-dev

合併壓縮css文件需要安裝的gulp插件（合併後壓縮）： gulp-minify-css

npm install gulp-minify-css --save-dev

合併壓縮 css文件的配置：

var gulp = require('gulp');
var concat = require('gulp-concat');         // 合併插件
var cssClean = require('gulp-clean-css');    // 引入css壓縮插件（兩者皆可）
var minifycss = require('gulp-minify-css');  // 引入css壓縮插件（兩者皆可）
var rename = require('gulp-rename');         // 引入重命名插件




// 註冊css的合併壓縮任務
gulp.task('css', function () {
    return gulp.src('css/*.css')                // 獲取css源文件
        .pipe(concat('build.css'))              // 合併後的命名
        .pipe(gulp.dest('dist/css/'))           // 合併後輸出路徑
        .pipe(minifycss())                      // 壓縮合並後的css
        .pipe(rename({ suffix: '.min' }))       // 壓縮後重命名，拓展添加後綴.min
        .pipe(gulp.dest('dist/css/'))           // 壓縮後的輸出路徑
});


// 默認任務
gulp.task('default',['css']);

 

五、編譯less。（將less預處理語言編譯成css）

編譯less需要安裝gulp插件： gulp-less

npm install gulp-less --save-dev

編譯less的配置:

var gulp = require('gulp');
var rename = require('gulp-less');         // 引入less編譯插件




// 註冊less的編譯任務
gulp.task('less',function () {
    return gulp.src('less/*.less')    // 獲取less源文件
        .pipe(less())                 // 將less編譯爲css
        .pipe(gulp.dest('css/'))      // 輸出文件路徑
});


// 默認任務
gulp.task('default',['less']);

 

六、壓縮html文件

壓縮html文件需要安裝的插件： gulp-htmlmin

npm install gulp-htmlmin --save-dev

壓縮html文件的配置：

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');         // 引入html的壓縮插件




// 註冊html的壓縮任務
gulp.task('html', function () {
    return gulp.src('*.html')                            // 獲取源文件
        .pipe(htmlmin({collapseWhitespace:true,}))       // 是否去除標籤之間的空白
        .pipe(gulp.dest('dist/'))                        // 文件輸出路徑
});


// 默認任務
gulp.task('default',['html']);

 

 

七、監視文件修改自動進行壓縮合並編譯

需要安裝插件： gulp-livereload

npm install gulp-livereload --save-dev

配置方式：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cssClean = require('gulp-clean-css');
var minifycss = require('gulp-minify-css');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var livereload = require('gulp-livereload');



// 註冊js合併壓縮任務
gulp.task('js', function(){
    return gulp.src('js/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())        // 需要爲每個任務添加監視
});

// 註冊less的編譯任務
gulp.task('less',function () {
    return gulp.src('less/*.less')
        .pipe(less())   // 將less編譯爲css
        .pipe(gulp.dest('css/'))
        .pipe(livereload())       // 需要爲每個任務添加監視
});

// 註冊css的合併壓縮任務
gulp.task('css', function () {
    return gulp.src('css/*.css')
        .pipe(concat('build.css'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/css/'))
        .pipe(livereload())       // 需要爲每個任務添加監視
});

// 註冊html的壓縮任務
gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(htmlmin({collapseWhitespace:true,}))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())       // 需要爲每個任務添加監視
});

// 註冊自動任務（半自動）  
gulp.task('watch',function () {
    livereload.listen();    // 開始監聽
    gulp.watch('js/*.js',gulp.series('js'))
    gulp.watch('less/*.less',gulp.series('less','css'))
    gulp.watch('css/*.css',gulp.series('css'))
    gulp.watch('*.html',gulp.series('html'))
});



gulp.task('default',['js','less','css','html','watch']);

 

八、熱更新（監視文件更新，編譯合併壓縮後並且自動刷新瀏覽器中打開的頁面）

安裝所需插件

npm install gulp-connect --save-dev

配置方式:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cssClean = require('gulp-clean-css');
var minifycss = require('gulp-minify-css');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var connect = require('gulp-connect');



// 註冊js合併壓縮任務
gulp.task('js', function(){
    return gulp.src('js/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(connect.reload())        // 給每一個任務添加監視
});

// 註冊less的編譯任務
gulp.task('less',function () {
    return gulp.src('less/*.less')
        .pipe(less())   // 將less編譯爲css
        .pipe(gulp.dest('css/'))
        .pipe(connect.reload())        // 給每一個任務添加監視
});

// 註冊css的合併壓縮任務
gulp.task('css', function () {
    return gulp.src('css/*.css')
        .pipe(concat('build.css'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/css/'))
        .pipe(connect.reload())        // 給每一個任務添加監視
});

// 註冊html的壓縮任務
gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(htmlmin({collapseWhitespace:true,}))
        .pipe(gulp.dest('dist/'))
        .pipe(connect.reload())        // 給每一個任務添加監視
});


// 註冊服務器自動更新任務（全自動）
gulp.task('connect',function () {
    // 配置服務器
    connect.server({
        root: 'dist/',  // 配置源文件根目錄
        port: '8888',   // 配置端口
        livereload: true,   // 是否自動更新
    })
    gulp.watch('js/*.js',['js'])
    gulp.watch('less/*.less',['less','css'])
    gulp.watch('css/*.css',['css'])
    gulp.watch('*.html',['html'])

});

gulp.task('default',['js','less','css','html','connect']);

 

九、實現跨域

在服務器模式基礎上進行實現跨域。

1、安裝插件：http-proxy-middleware。

npm install --save-dev http-proxy-middleware

2、引入插件

var proxy = require('http-proxy-middleware');

3、引用示例

// 註冊服務器自動更新任務（全自動）
gulp.task('connect',function () {
    // 配置服務器
    connect.server({
        root: 'dist',  // 配置源文件根目錄
        port: '8888',   // 配置端口
        livereload: true,   // 是否自動更新

        middleware: function () {    // 作爲中間件引用
            return [           // 返回的是一個數組，可定義多個域名代理
                proxy("/api",{        // 跨域域名前綴，前面加入此前綴可代理以下定義的域名
                    target:"https://yourdmain.com/",      // 代理的域名  
                    changeOrigin:true
                })
            ]
        }

    })
    gulp.watch('js/*.js',gulp.series('js'))
    gulp.watch('less/*.less',gulp.series('less','css'))
    gulp.watch('css/*.css',gulp.series('css'))
    gulp.watch('*.html',gulp.series('html'))
});

 

十、gulp4.0與gulp3.0的差異

任務依賴的編寫方式有所改變

gulp3.0書寫方式：

gulp.task('default',['js','less','css','html','connect'], function(){});

gulp4.0書寫方式()：

// 任務同步執行
gulp.task('default',gulp.series(['js','less','css','html','connect'], function(){}));

// 任務異步執行
gulp.task('default',gulp.parallel(['js','less','css','html','connect'], function(){}));

gulp4.0以後task方式只接受兩個參數

 

 

注：不喜勿噴，歡迎討論