自动化构建——gulp学习研究小结

前言：

在这里，你先要去基本知道  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哈哈~