前提：

       gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成。

        gulp壓縮的一般都是js，css，html，image等檔案。使用gulp壓縮之後程式碼會更加安全體積會變小。Gulp外掛不同所涉獵的功能也不同。常用的gulp外掛

使用gulp的步驟：

      1. 全域性安裝gulp ----cnpminstall gulp –g

      2. 本地安裝gulp ----cnpminstall gulp –save

注：全域性安裝gulp是為了執行gulp任務，本地安裝gulp是為了呼叫gulp外掛的功能。

     3. 本地安裝gulp外掛，

     cnpm install gulp-rename  ---重新命名檔案

     cnpm installgulp-uglify    ---壓縮js檔案

     cnpm insallgulp-imagemin  ---壓縮圖片

     cnpm installgulp-htmlmin   ---壓縮HTML

     cnpm installgulp-minify-css ---壓縮css

     4. 新建gulpfile.js檔案（重要）

//匯入工具包 require('node_modules裡對應模組')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
    less = require('gulp-less');
 
//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //該任務針對的檔案
        .pipe(less()) //該任務呼叫的模組
        .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css(s輸出資料夾)
});
 
gulp.task('default',['testLess', 'elseTask']); //定義預設任務 elseTask為其他任務，該示例沒有定義elseTask任務
 

   5.執行gulp任務

    gulp testLess

成果展示：

感受：

       實踐出真知。