WebStorm 项目gulp配置

config.json

配置调试时的一些信息，其中template用来配置html中的一些内容替换，例如配置生产和测试栏目id差异等

比如测试环境html中的写法为 <%= env %> ,这样在编译时gulp会将html中的全部<%= env %>替换为测试

在对于公用头尾的引用，模板中有时使用wcm变量，而本地预览时不可用，就可以做如下配置，将模版中的ROOT_PATH替换成 ${ROOT_PATH}， 而在预览时替换成 ../

开发时：

<!--#include virtual="<%=ROOT_PATH%>public/public_header/vip_head.shtml"-->

发布预览：

<!--#include virtual="../public/public_header/vip_head.shtml"-->

发布测试：

<!--#include virtual="${ROOT_PATH}/public/public_header/vip_head.shtml"-->

{ "serverPort":"3001", //本地预览端口 "dev_template":{ //测试变量 "env": "测试", "ROOT_PATH":"${ROOT_PATH}", "base":"" }, "pro_template":{ //生产变量 "env": "生产", "ROOT_PATH":"${ROOT_PATH}", "base":"" }, "debug_template":{ //本地预览变量 "env": "调试", "ROOT_PATH":"../", "base":"<base href='../../'>" }, "preview_template":{ //远程预览变量 "env": "预览", "ROOT_PATH":"../", "base":"<base href='http://218.58.50.158:10080/~jenkins/jobs/cn/workspace/pc_site/'>" }, "testSiteId":"5", //测试站点id "proSiteId":"5" //生产站点id}

编辑代码

1.开发过程静态页面在static目录下，资源文件存放在在images

2.项目中的公共资源，例如共用头尾等均存放在static/public目录下

3.在静态页面开发时，为了与模版中各资源的引用地址统一，需要重定向根目录地址，在html头部加入变量<%=base%>,这样需要用到的资源直接使用 images/* 引用

4.尽量通过注释标记html中的结构,如结构较为复杂需提供相应页面的布局文件

5.开发过程的动态数据使用跨域请求或者本地模拟的json，ajax请求的url地址需要在页面底部统一配置，方便在制作模板时统一替换，例如：

var InterfaceUrl={ memberActivity:"http://test.haier.com/ids/cn/memberActivity.jsp", abcCode:"http://test.haier.com/ids/abc.code?random=", memberActivityDo:"http://test.haier.com/ids/mobile/memberActivityDo.jsp", saveHumanaRecord:"http://test.haier.com/HaierFramework/multiplex/saveHumanaRecord.do", checkedCurUserIsThird:"http://test.haier.com/HaierFramework/myhaier/checkedCurUserIsThird.do", queryAppuserMo:"http://test.haier.com/HaierFramework/haier/appuser/queryAppuserMo.do" }

调试

在浏览器中的预览调试，可以通过调起gulp的debug任务，调起的方法直接双击选择WebStorm左下角的gulp任务即可，如果左下角没有显示gulp任务，可以在活动目录下的gulpfile.js右键选择显示gulp任务

双击执行 gulp debug 调起本地服务器端口默认3001

此时debug任务会监听当前站点文件夹下文件的变化，当有改动时会自动刷新页面