[筆記] gulp - 1. 安裝

前端自動化工具，使用 Node.js。
目前已經知道的用途(很多)：

• 多檔案打包成一個
• 壓縮 js css html 甚至是圖片檔
• css 後處理器 ( e.g autoprefixer、lostgrid )
• html template 編譯 ( e.g pug/jade )
  ………………………

需求

• Node.js
• gulp 版本 4.0+

安裝

npm install -g gulp-cli

然後開一個 Node.js 專案，並安裝 gulp

npm init
npm install 
npm install gulp --save

就搞定了

範例

1. 在專案資料夾第一層建立 test.js ，裡面：

   var gulp = require("gulp");
   gulp.task("copyHTML",()=>{
       return gulp.src("./source/*.html")
                  .pipe(gulp.dest("./public/"))
   })

   作用：將 source 底下的所有 html 檔案複製到 public 底下

2. 建立一個 source 資料夾，底下隨便寫一個 html 檔案。

3. cmd 到 專案目錄下：

   gulp copyHTML

常用的方法

• .task
• .src (readstream)
• .dest (writestream)
• .watch
• .pipe

套件

• 編譯 : coffee
• 合併 : concat
• 壓縮 : uglity

cmd 命令

• gulp –tasks : 查看可用的 task
• gulp taskname: 運行指定的 task