前言：
在这里，你先要去基本知道 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哈哈~
网友评论