Gulp+Webpack多页系统方案脚手架
前置条件
- Node.js
- Ruby
注1：Less无需安装Ruby、compass。
注2：采用node-sass模块（安装不稳定）的也无需安装Ruby、compass。
环境配置
gem install compassnpm i -g gulp
npm i -g webpack
npm i运行
开发
注：服务+监听
npm run dev或
gulp dev --env development或
gulp --env development测试（本地模拟打包后的环境）
注：build+服务
npm run online或
gulp online构建
当前目录构建（用于本地测试）
npm run build或
gulp build发布构建（用于提测）
npm run release或
gulp release开发说明
开发技术栈
- Webpack：模块化+ES6转码
- Gulp：开发、打包等工程化工具
- Sass/Less
- EJS：HTML模板
- ES6
JS部分
需在模块js文件前引入公共JS文件：
<script type="text/javascript" src="/js/common.js"></script>路径引用方式：
<script type="text/javascript" src="/js/xxx/xxx.js"></script>CSS部分
通过以下方式定义（在build块内的多个css文件将合并成一个）：
<!-- build:css /style/css/xxx.css -->
<link type="text/css" rel="stylesheet" href="/style/css/xxx.css"></style>
<!-- endbuild -->HTML部分
通过以下方式引入公共模板文件：
<% include ../partials/header.ejs %>Mock
模拟数据文件在dev/mock，子目录路径+文件名对应ajax的URL，ajax地址前缀配置通过config-gulp.json中的ajaxPrefix设置，即：以该前缀开头的URL将匹配mock下的模拟数据文件进行返回。