前言：

在这里，你先要去基本知道  npm  和  cnpm，不知道的  分别取自行百度。

相关demo代码  请移步宝宝的 github仓库：

https://github.com/ChaoyaoYe/gulp_test.git

第一步  在全局安装gulp的脚手架

运行cmd   在任意目录下，输入$cnpm install gulp -g

也就是安装gulp全局脚手架的意思

验证：在任意目录，输入 $gulp -v  如果会出现反馈就代表第一步成功，反馈图如下：

第二步 下载宝宝写好的gulp最简化的一个demo

下载地址，请移步github链接如下：https://github.com/ChaoyaoYe/gulp_test.git
将下载下来的zip压缩包解压，或者是你clone下来的repositorie仓库，目录结构如下：

第三步  本地安装项目所需的模块

括号里的是简单解释为什么，看不懂耶没关系   只要做了就可以   多写几遍，其义自见。

A、cmd  基于第二部的仓库目录里，运行$ cnpm i

（这是安装gulp压缩 合并 css  html img  必须的npm模块，需要哪些模块有在package.json里的devDependencies字段说明）

安装完后会多出node_modules这个文件夹

第四步  创建你的生产环境目录

在上面的文件夹里，创建一个src文件夹，并且把你的项目文件，放进来，做完后，宝宝的文件目录树结构如下：

接着只要在这个目录下运行  $gulp default 就会自动压缩css  js  html  img 了，是输出到dest的文件夹里。

到这里就大功告成了。

后话：

这里，其实还有2个没解决，

第一个问题是：

如果启用了合并功能，js、css和自动合并为all.js   all.css

可是html的标签依然为  

script   a.js

script  b.js

link   a.css

link b.css

这个还不知道怎么解决   感觉还是不够自动化构建

第二个问题是：

宝宝的项目是依赖于requireJS写的   应该先引入 require   再引入JQ  再引入依赖于JQ的其他js

但是一旦js合并，依赖关系好像就乱了。

所以，基于以上2个问题，我的建议是暂时先别css、js合并  只压缩就好，知道怎么解决的高手也可以告诉宝宝。

这个教程写的比较粗糙   还少了一个常用功能   es6  转  es5，下次会补齐，祝大家新年快乐， 宝宝新年大发O(∩_∩)O哈哈~