/scaffold-multipage

multipage app based on gulp & webpack

Primary LanguageJavaScriptBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

Gulp+Webpack多页系统方案脚手架

前置条件

  1. Node.js
  2. Ruby

注1：Less无需安装Ruby、compass。

注2：采用node-sass模块（安装不稳定）的也无需安装Ruby、compass。

环境配置

gem install compass
npm 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下的模拟数据文件进行返回。