Glup快速入門整理

Gulp介紹

• 中文主頁: http://www.gulpjs.com.cn/

• gulp是與grunt功能類似的前端專案構建工具, 也是基於Nodejs的自動任務執行器

• 能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的
  合併、壓縮、檢查、監聽檔案變化、瀏覽器自動重新整理、測試等任務

• gulp更高效(非同步多工), 更易於使用, 外掛高質量

安裝 nodejs, 檢視版本: node -v

建立一個簡單的應用gulp_test

|- dist
|- src
  |- js
  |- css
  |- less
|- index.html
|- gulpfile.js-----gulp配置檔案
|- package.json
  {
    "name": "gulp_test",
    "version": "1.0.0"
  } 

安裝gulp:

• 全域性安裝gulp

  npm install gulp -g

• 區域性安裝gulp

  npm install gulp --save-dev

• 配置編碼: gulpfile.js

  //引入gulp模組
  var gulp = require(`gulp`);
  //定義預設任務
  gulp.task(`任務名`, function() {
    // 將你的任務的任務程式碼放在這
  });
  gulp.task(`default`, [`任務`])//非同步執行

• 構建命令:

  gulp

使用gulp外掛

• 相關外掛:

  • gulp-concat : 合併檔案(js/css)

  • gulp-uglify : 壓縮js檔案

  • gulp-rename : 檔案重新命名

  • gulp-less : 編譯less

  • gulp-clean-css : 壓縮css

  • gulp-livereload : 實時自動編譯重新整理

• 重要API

  • gulp.src(filePath/pathArr) :

    • 指向指定路徑的所有檔案, 返回檔案流物件

    • 用於讀取檔案

  • gulp.dest(dirPath/pathArr)

    • 指向指定的所有資料夾

    • 用於向資料夾中輸出檔案

  • gulp.task(name, [deps], fn)

    • 定義一個任務

  • gulp.watch()

    • 監視檔案的變化

• 處理js

  • 建立js檔案

    • src/js/test1.js

      (function () {
      function add(num1, num2) {
      var num3 = 0;
      num1 = num2 + num3;
      return num1 + num2;
      }
      console.log(add(10, 30));
      })();

    • src/js/test2.js

      (function () {
      var arr = [2,3,4].map(function (item, index) {
        return item+1;
      });
      console.log(arr);
      })();

  • 下載外掛:

    npm install gulp-concat gulp-uglify gulp-rename --save-dev

  • 配置編碼

    var concat = require(`gulp-concat`);
    var uglify = require(`gulp-uglify`);
    var rename = require(`gulp-rename`);
    
    gulp.task(`minifyjs`, function() {
        return gulp.src(`src/js/*.js`) //操作的原始檔
            .pipe(concat(`built.js`)) //合併到臨時檔案     
            .pipe(gulp.dest(`dist/js`)) //生成到目標資料夾
            .pipe(rename({suffix: `.min`})) //重新命名  
            .pipe(uglify())    //壓縮
            .pipe(gulp.dest(`dist/js`));
    });
    
    gulp.task(`default`, [`minifyjs`]);

  • 頁面引入js瀏覽測試 : index.html

    <script type="text/javascript" src="dist/js/built.min.js"></script>

  • 打包測試: gulp

• 處理css

  • 建立less/css檔案

    • src/css/test1.css

      #div1 {
        width: 100px;
        height: 100px;
        background: green;
      }

    • src/css/test2.css

      #div2 {
        width: 200px;
        height: 200px;
        background: blue;
      }

    • src/less/test3.less

      @base: yellow;
      .index1 { color: @base; }
      .index2 { color: green; }

  • 下載外掛:

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

  • 配置編碼

    var less = require(`gulp-less`);
    var cleanCSS = require(`gulp-clean-css`);
    
    //less處理任務
    gulp.task(`lessTask`, function () {
      return gulp.src(`src/less/*.less`)
          .pipe(less()) 
          
          .pipe(gulp.dest(`src/css`));
    })
    //css處理任務, 指定依賴的任務
    gulp.task(`cssTask`,[`lessTask`], function () {
    
      return gulp.src(`src/css/*.css`)
          .pipe(concat(`built.css`))
          .pipe(gulp.dest(`dist/css`))
          .pipe(rename({suffix: `.min`}))
          .pipe(cleanCSS({compatibility: `ie8`}))
          .pipe(gulp.dest(`dist/css`));
    });
    
    gulp.task(`default`, [`minifyjs`, `cssTask`]);

  • 頁面引入css瀏覽測試 : index.html

    <link rel="stylesheet" href="dist/css/built.min.css">
    <div id="div1" class="index1">div1111111</div>
    <div id="div2" class="index2">div2222222</div>

  • 打包測試: gulp

• 處理html

  • 下載外掛:

    npm install gulp-htmlmin --save-dev

  • 配置編碼

    var htmlmin = require(`gulp-htmlmin`);
    //壓縮html任務
    gulp.task(`htmlMinify`, function() {
        return gulp.src(`index.html`)
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(gulp.dest(`dist`));
    });
    gulp.task(`default`, [`minifyjs`, `cssTask`, `htmlMinify`]);

  • 修改頁面引入

    <link rel="stylesheet" href="css/built.min.css">
    <script type="text/javascript" src="js/built.min.js"></script>

  • 打包測試: gulp

• 自動編譯

  • 下載外掛

    npm install gulp-livereload --save-dev

  • 配置編碼:

    var livereload = require(`gulp-livereload`);
              
    //所有的pipe
    .pipe(livereload());
    
    gulp.task(`watch`, [`default`], function () {    
      //開啟監視
      livereload.listen();
      //監視指定的檔案, 並指定對應的處理任務
      gulp.watch(`src/js/*.js`, [`minifyjs`])
      gulp.watch([`src/css/*.css`,`src/less/*.less`], [`cssTask`,`lessTask`]);
    });

  • 熱載入(實時載入)

    • 下載外掛：gulp-connect

      1、 npm install gulp-connect --save-dev
      2、 註冊 熱載入的任務 server，注意依賴build任務 
      3、註冊熱載入的任務
          //配置載入的選項
          connect.server({
      root : `dist/`,//監視的源目標檔案路徑
      livereload : true,//是否實時重新整理
      port : 5000//開啟埠號
           });
           // 自動開啟連結
           open(`http://localhost:5000`);//npm install open --save-dev
           // 監視目標檔案
          gulp.watch(`src/js/*.js`, [`js`]);
          gulp.watch([`src/css/*.css`, `src/css/*.less`], [`cssMin`, `less`]);

  • 擴充套件

    • 打包載入gulp外掛

    • 前提：將外掛下載好。

    • 下載打包外掛： gulp-load-plugins

    • npm install gulp-load-plugins –save-dev

    • 引入： var $ = require(`gulp-load-plugins`)();！！！引入的外掛是個方法，必須記住呼叫。

    • 神來之筆：其他的外掛不用再引入了

    • 使用方法：

      * 所有的外掛用 $ 引出，其他外掛的方法名統一為外掛的功能名字(即外掛名字的最後一部分)：如：concat,connect,cssmin...
      gulp.task(`less`, function () {
            return gulp.src(`src/less/*.less`)
          .pipe($.less())//將less轉換為less
          .pipe(gulp.dest(`src/css/`))//將轉換為less的檔案輸出到src下
          .pipe($.livereload())//實時重新整理
          .pipe($.connect.reload())
      });