前端自動化構建之Gulp的使用（學習筆記）

Gulp是一款基於流的前端自動化構建工具，相似於任務管理器，能夠自動化的幫助咱們完成開發過程當中大量的重複工做，如預處理語言的編譯，js、css、html壓縮混淆，圖片尺寸優化等。其中文網的網址爲 https://www.gulpjs.com.cn/，官網地址爲 https://gulpjs.com/。下面來介紹Gulp在項目中的使用步驟。

1、Gulp使用的基本步驟

一、全局安裝gulp命令行工具

在安裝和使用gulp以前，必須先確保node環境已經配置成功，具體步驟可參考文章 Node環境的配置與安裝。完成node環境的安裝以後，咱們能夠在任意目錄下，打開cmd，鍵入命令-> npm install gulp -g 來進行gulp的全局安裝。能夠經過命令-> gulp -v來驗證gulp是否安裝成功。以下圖所示：

二、生成項目配置文件

咱們在當前的項目文件目錄下，打開cmd，鍵入命令-> npm init,能夠所有回車便可在項目文件夾的根目錄下生成一個package.json的配置文件。

三、將gulp做爲項目的開發依賴進行安裝

在當前的項目文件目錄下，打開cmd，鍵入命令-> npm install gulp --save-dev。（由於gulp包當中即包含工具，也包含一些編程的API，因此咱們須要將gulp做爲項目的開發依賴安裝到項目本地。）

四、建立任務主文件

咱們在項目文件夾的根目錄下建立一個gulp的任務主文件，其文件名固定爲gulpfile.js。gulp用於幫助咱們機械化的完成一些重複的工做，其機制就是將重複的工做抽象成一個個的任務，故咱們須要在主文件gulpfile.js當中進行任務的註冊。其基本代碼結構爲：

var gulp = require('gulp');      // 載入gulp模塊
gulp.task('default',function(){  //註冊一個任務
    //當gulp執行default這個任務時，會自動執行該函數。
});

2、Gulp的使用示例

一、使用gulp完成文件自動化拷貝與監聽

當咱們須要將開發階段的源碼目錄src中的文件自動拷貝至發佈上線階段的文件目錄dist當中，而且監聽源文件的變化，並及時自動更新拷貝文件。gulpfile.js當中的示例代碼以下所示：

var gulp = require('gulp');      
gulp.task('copy',function(){    //註冊一個拷貝的任務
    gulp.src('./src/index.html')
        .pipe(gulp.dest('./dist/'));
});
//當執行copy這個任務時，便可將src目錄下的index.html文件拷貝至dist文件夾當中，文件名不變。
gulp.task('listen',function(){   //註冊一個監聽的任務
    gulp.watch('./src/index.html',['copy']);
//監聽src目錄下的index.html文件，一旦文件發生變化並保存時，便可執行任務數組當中的copy任務。
});

在完成任務的註冊以後，便可在項目文件夾下，打開cmd，鍵入命令-> gulp listen 便可。

二、使用gulp自動完成less文件的編譯、壓縮與合併

gulp能夠配合許多插件（plugins）來幫助咱們完成這些重複性任務，當前支持的插件列表能夠見官網 https://gulpjs.com/plugins/ 。例如咱們可使用插件gulp-less來完成less文件的編譯成css文件，使用插件gulp-cssmin來完成css文件的自動壓縮，使用插件gulp-concat-css來完成多個css文件的合併，使用插件gulp-rename來完成css文件的重命名。
首先在安裝這些插件，在項目文件夾下，打開cmd，鍵入命令-> npm install gulp-less gulp-cssmin gulp-concat-css gulp-rename --save-dev。再在gulpfile.js當中進行插件模塊包的引入與任務的註冊，示例代碼以下所示：

var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var concat = require('gulp-concat-css');
var rename = require('gulp-rename');      
gulp.task('style',function(){
    gulp.src('./src/style/*.less')     //獲取到style目錄下全部的less文件
        .pipe(less())                   // 完成less文件編譯，成爲css文件
        .pipe(concat('all.css'))       // 將多個css文件合併爲一個all.css文件
        .pipe(cssmin())                // 完成css文件的壓縮
        .pipe(rename({suffix:'.min'})) //重命名文件名爲all.min.css
        .pipe(gulp.dest('./dist/style/')); //將all.css文件複製到dist文件夾的style目錄下，文件名不變
});

在完成任務的註冊以後，便可在項目文件夾下，打開cmd，鍵入命令-> gulp style 便可。