前端gulp自动构建说明

一、

将package.json、gulpfile.js两个文件拷贝到和自己项目同级别的目录下。
例：kingnetio(项目文件夹)、package.json、gulpfile.js

二、

运行npm install或者cnpm install都可以，安装构建所需的依赖包资源。
替换gulp-rev.zip压缩包里的module(压缩资源只改变版本号，不会修改文件名)

三

检查所需要构建的项目。
1、html代码中的<、>符号需要用<、>代替，否则打包时候会出错。

2、在js目录下新建common.js并且确保所有项目用到的木块儿在common.js中加载，修改start.js，在start.js中启动common.js.

3、保证自己的路由和Controller的js一一对应，且路由对应的tpl模板文件的名字需要和路由的名字对应。
例：路由：”/retain”,模板文件:”retain.html”
路由：”/usergroup/new”,模板文件:”usergroup-new.html”
路由：”/demo/kit/input”,模板文件:”demo-kit-input.html”

4、项目中css如果有重写的情况，则需要用css中的权重规则去顶掉前面的样式、而不可以用css文件引入的上下顺序去顶掉之前的样式，因为打包以后所有的样式会被压缩到一个文件中，没有上下关系，样式可能会错乱。

例：base.css中 .wrapper{width:100%}
index.css中你想要.wrapper的width不是100%，而是auto。可以在index.css中写成div.wrapper{width:auto}或者前面添加父元素的class或者添加自己本身另外一个class都可以，css的权重本文不多做介绍。

5、替换angular-route.js文件，或者自己手动把文件写成AMD标准格式。

6、项目中的入口HTML文件，css和js引用位置需要加上 构建的注释代码。
例：

<!-- build:css -->
<link rel="stylesheet" href="./static/css/index.css">
<!-- endbuild -->
<!-- build:js -->
<script src="./static/js/libs/require/require.min.js" data-main="./static/js/config.js?v=999"></script>
<script type="text/javascript">
    require(["./static/js/start.js?v=999"])
</script>
<!-- endbuild -->