Glup快速入門整理

booder發表於2019-02-16

  • 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())
});

相關文章