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。（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 ；
• 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。

---