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任务会监听当前站点文件夹下文件的变化，当有改动时会自动刷新页面