gulp 和 gulp plugins 使用

• node
  Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
• npm
  npm 是 Node.js' package ecosystem，the package manager for javascript.
• npm gulp

gulp doc

• gulp doc in GitHub
• gulp API docs

安裝 gulp 和 gulp plugins

• 指南：gulp: getting-started
• npm rm --global gulp
  先解除安裝原來全域性安裝的 gulp，避免衝突；
• npm install -g gulp-cli
  全域性安裝 gulp-cli，--global | -g；
• npm install --save-dev gulp
  專案下面安裝本地 gulp
• gulp plugins
• npm yargs
  npm i yargs --save-dev

npm install --save-dev gulp
npm install --save-dev gulp-connect
npm install --save-dev gulp-file-include
npm install --save-dev gulp-uglify
node_modules/gulp/bin/gulp.js html css # 執行指定的兩個 tasks：html 和 css，gulpfile 檔案預設為當前目錄下的 gulpfile.js。

瞭解 gulp，gulp plugins，npm-keyword-gulpplugin，gulp-ignore

gulp 執行任務

• gulp --gulpfile=${gulpfile} <tasks> 執行指定 tasks。（gulp -h 檢視幫助）
• Task specific flags：通過命令列引數控制命令執行過程
• gulp html [--site={m|www}] 同時支援 m 和 www 站點，沒有 --site 引數則預設 www 站點；

gulp-file-include：a gulp plugin for file include；

gulp-uglify

gulp-uglify: Minify files with UglifyJS；

指定 mangle 引數：Pass false to skip mangling names：uglify({mangle:false})，在發生問題時，可以幫助定位。

package.json

• npm install
  （不帶引數）安裝由 package.json 指定的 packages；
  不帶引數這種方式經常會導致某個 package 安裝有問題，最好還是分別安裝：npm install --save-dev <package>；
• npm update
  （不帶引數）更新由 package.json 指定的 packages；

dist.tarball 下載地址

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz
http://registry.npmjs.org/gulp-file-include/-/gulp-file-include-0.13.7.tgz

使用模板

• php 和 模板（訪問時每次動態生成）
• node 和 模板（首次或強刷 + 區域性資料重新整理）
• gulp 和 模板（部署時一次生成），通過 nunjucks-with-gulp、introduction-gulp-js 瞭解原理。

complete-guide-reducing-page-weight

-
-

Windows CMD 命令列下的使用說明

Windows command prompt 下的使用和 git bash 下並無不同。我本人更喜歡在 git bash 下工作。

• gulp-cli 全域性安裝在 %APPDATA%\npm 下
  （npm 安裝後 path 環境變數就有了）

  
  
  

  Paste_Image.png

• %APPDATA%
  在 cmd 下：set appdata 或者 echo %appdata% 可以檢視 appdata 變數值。
  通常：appdata=C:\Users{YOUR_USER}\AppData\Roaming

• Win 10 系統非常不穩定，其表現不予置評；

為何 gulp 既要全域性安裝又要本地安裝（在專案目錄下安裝）？

• npm install -g gulp-cli
• npm install --save-dev gulp

即：gulp-cli 全域性，gulp 本地。兩者作用不同。

全域性 gulp-cli 起到的是一個命令入口作用。其目的類似 npm 的全域性安裝，就是安裝之後，在每個目錄下都可以使用 gulp 命令。
本地 gulp 承擔的是實際作業作用，專案下未安裝 gulp 會出現：

$ gulp
[11:41:40] Local gulp not found in ~
[11:41:40] Try running: npm install gulp

why？

stackoverflow: Why do we need to install gulp globally and locally?
Addendum:
It appears that gulp has some unusual behaviour when used globally. When used as a global install, gulp looks for a locally installed gulp to pass control to. Therefore a gulp global install requires a gulp local install to work. The answer above still stands though. Local installs are always preferable to global installs.

全域性的 gulp 負責接受來自作業系統的指令，然後將控制權交給本專案目錄下安裝的本地 gulp。

---