Handl-web

环境搭建

• Node.js：v4.0+

• Sass & Compass (可选，如果不需要compass雪碧可以不安装sass与compass)

安装

$ npm install -g gulp webpack
$ npm install -g node-dev
$ cd web && npm install

开发环境

• 开发

  $ npm run start

  浏览器打开http://localhost:3000/a.html

• compass雪碧

  $ compass watch

  在src/img/icons下添加图标后，会自动生成css/sprites－icons.css与img/sprites-icons.png

打包部署

• 打包

  $ npm run build

  将来build文件夹直接部署到apache

架构说明

- 如果3000端口被占用，请到app.js中修改。

- ajax跨域请求请到routes.js中参考line 34, 将ip改为所跨域服务器地址。

- build后所有静态资源(css, js, img)将被压缩，并且会动态的按需合并。

- 小于10KB的图片自动转为dataUrl，节省请求次数。

- 开发阶段中css文件直接内嵌到head中，打包后css分离出来单独引用。

目录结构

- web/
  - src/                   # 开发目录
    + css/                 # css
    + scss/                # sass雪碧
    + img/                 # 图片
    + js/                  # js&jsx
    a.html                 # page a
    b.html                 # page b
    c.html                 # page c
  + build/                 # 输出目录
  + mock/                  # 假数据
  app.js                   # 本地server
  routes.js                # 本地路由
  webpack.config.js        # webpack配置文件
  gulpfile.js              # gulp config
  package.json             # 配置
  README.md                # 说明