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