前端建構工具--Gulp的使用

gulp是基于Nodejs的自動任務運作器，能自動化地完成JavaScript、sass、less

html、css、image等檔案的測試、檢查、合并、壓縮、格式化、浏覽器自動重新整理、部署檔案生成，并監聽檔案在該改動後重複指定的這些步驟。在實作上，gulp借鑒了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。

gulp的安裝

gulp是基于Nodejs的自動任務運作器，是以安裝gulp之前要先安裝Node.js環境，Nodejs的安裝非常簡單 隻需在nodejs官網上下載下傳，按照正常步驟安裝即可。

全局安裝gulp

在git bash中輸入

npm install -g gulp
           

對gulp進行安裝，安裝完成後，可以通過

gulp -v
           

指令檢測gulp的版本

全局安裝gulp後，還需要在每個要使用gulp的項目中單獨安裝一次。把目錄切換到項目檔案夾中（在window中 可以通過 cd “檔案路徑”切換檔案夾）

在項目檔案夾下運作

npm install gulp --save-dev
           

–save:将儲存配置資訊至package.json（該檔案是nodejs的項目配置檔案。package.json是一個普通的json檔案 不能添加任何注釋）

-dev/-dep:儲存至package.json的devDeoendencies節點，不指定-dev/dep将儲存至dependencies節點。

注：package.json中的dependencies是項目在生産環境中需要的依賴，devDenpendencies是開發過程中所要依賴的包

安裝完Gulp之後，可以運作npm init初始化package.json檔案.

初始化之後，需要在項目的根目錄下建立gulpfile.js檔案，檔案名不能修改，

該檔案中定義gulp中的任務，它可以通過gulp指令來運作

gulp基礎文法

gulp有五個方法：src、dest、task、run、watch

src和dest：指定源檔案和處理後檔案的路徑

watch：用來監聽檔案的變化

task：指定任務

run:執行任務

插件安裝

樣式處理

css預處理樣式/sass編譯

安裝該插件之前需要安裝sass基于的ruby環境（官網下載下傳），并且安裝sass，

将這些安裝完成後輸入指令

npm install gulp-ruby-sass --save-dev
           

安裝sass編譯插件，通過在gulpfile.js檔案中引入該插件，并對sass任務進行基礎配置

即可

gulp-uglify js檔案壓縮

使用uglify引擎壓縮js檔案

安裝指令

npm install gulp-uglify --save-dev
           

圖檔壓縮 gulp-imagemin

gulp-imagemin 壓縮png jpeg gif和svg圖像

安裝指令

npm install gulp-imagemin --save-dev
           

隻操作有過修改的檔案（gulp-changed）

該插件會首先把檔案進行對比，如果檔案沒有改動，則跳過後序任務

安裝指令

npm install gulp-changed --save-dev
           

編寫gulp任務

// 引入 gulp及元件
var gulp    = require('gulp'),                 //基礎庫
    fs = require('fs'),
    path = require('path'),
    merge = require('merge-stream'),
    imagemin = require('gulp-imagemin'),       //圖檔壓縮
    //sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css壓縮
    jshint = require('gulp-jshint'),           //js檢查
    uglify  = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并檔案
    clean = require('gulp-clean'),             //清空檔案夾
    changed=require('gulp-changed'),            //隻操作有過修改的檔案
    pngquant = require('imagemin-pngquant');
var scriptsPath = 'public/javascripts'

// 樣式處理
gulp.task('css', function () {
var cssSrc = 'public/stylesheets/*.css',
    cssDst = 'public/dist/css';

gulp.src(cssSrc)

    .pipe(gulp.dest(cssDst))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest(cssDst));
});

// 圖檔處理
gulp.task('images', function(){
    var imgSrc = 'public/images/**/*',
        imgDst = 'public/dist/images';
    gulp.src(imgSrc)
        .pipe(changed(imgDst))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant深度壓縮png圖檔的imagemin插件))
        }))

        .pipe(gulp.dest(imgDst));
})

// js處理
function getFolders(dir){
    return fs.readdirSync(dir)
        .filter(function(file){
            return fs.statSync(path.join(dir,file)).isDirectory();
        })
}
gulp.task('js', function () {
var jsSrc = 'public/javascripts/*.js',
    jsDst ='public/dist/js';
var folders = getFolders(scriptsPath);

var tasks = folders.map(function(folder){
    //拼接成foldername.js
    //寫入輸出
    //壓縮
    //重命名
    //再一次寫入輸出
    return gulp.src(path.join(scriptsPath,folder,'/*.js'))
        .pipe(concat(folder + '.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(uglify())
        .pipe(rename(folder + '.min.js'))
        .pipe(gulp.dest(jsDst));
})
return merge(tasks);

/*gulp.src(jsSrc)
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest(jsDst))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest(jsDst));*/
});

// 清空圖檔、樣式、js
gulp.task('clean', function() {
gulp.src(['public/dist/css', 'public/dist/js', 'public/dist/images'], {read: false})
    .pipe(clean());
});

 // 預設任務 清空圖檔、樣式、js并重建 運作語句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('css','images','js');
});

// 監聽任務 運作語句 gulp watch
gulp.task('watch',function(){

    server.listen(port, function(err){
        if (err) {
         return console.log(err);
     }

    // 監聽js
    gulp.watch('public/javascripts/*.js', function(){
        gulp.run('js');
    });

    // 監聽css
    gulp.watch('public/stylesheets/*.css', function(){
        gulp.run('css');
    });

    // 監聽images
    gulp.watch('public/images/*', function(){
        gulp.run('images');
    });
    });

});
           

運作任務

使用指令gulp可以運作gulpfile.js 中的任務。比如當需要壓縮js檔案時，由于壓縮js的任務名為‘js’運作指令

gulp js
           

即可壓縮js檔案