speed-react

react+webpack+gulp开发环境搭建

模板下载：
git clone https://github.com/efe-team/speed-react.git

1.进入目录
  cd speed-react
2.安装依赖包
  npm install
3.打包构建

  // 静态服务  实时刷新页面
  gulp start
  // 命令完成后，浏览器访问页面 如：http://127.0.0.1:8080/index.html (ip 和 port 可配)

    or

  //调试模式   
  gulp debug
  //执行gulp命令打包文件(实时刷新页面)

    or

  //发布环境
  gulp
  //执行gulp命令打包文件(压缩合并操作)

目录结构

|- public  //静态资源开发目录
|   |- base
|   |   |- imgs    //公用图片
|   |   |- style   //公用样式
|   |   |- scripts //公用js
|   |   |- others  //其他资源文件，如json、pdf、docx等
|   |- components  //组件目录
|   |   |- test    //实例组件(正式开发请删除)
|   |   |   |- imgs
|   |   |   |- test.jsx  
|   |   |   |- test.less  
|   |- routes       //页面路由入口
|   |   |- pageA    //pageA
|   |   |   |- imgs
|   |   |   |- PageA.jsx  
|   |   |   |- PageA.less  
|   |   |- pageB    //pageB
|   |   |   |- imgs
|   |   |   |- PageB.jsx  
|   |   |   |- PageB.less
|   |- views       //页面入口
|   |   |- template //页面模板
|   |   |   |- tpl.html
|   |   |- pages       //页面目录
|   |   |   |- index   //实例页面index
|   |   |   |   |- imgs
|   |   |   |   |- index.jsx  
|   |   |   |   |- index.less  
|   |   |   |- admin   //实例页面admin
|   |   |   |   |- imgs
|   |   |   |   |- index.jsx  
|   |   |   |   |- index.less
|- .babelrc                // babel配置文件
|- .editorconfig           // 文件编辑配置
|- .eslintrc.js            // eslint配置
|- .gitignore              // git提交忽略配置
|- gulpfile.js             // gulp配置
|- package.json            // 包管理属性
|- postcss.config.js       // postcss-loader 配置
|- README.md               // readme介绍
|- webpack.config.js       // webpack release配置
|- webpack.dev.config.js   // webpack debug 配置

功能概述

1. 支持css、sass、less等多种css写法；
2. 支持单、多页面开发方式（推荐单页面+react-router模式）
3. 支持react-router懒加载，参考pages下的index.jsx页面中懒加载pageB
4. 支持eslint检测js、jsx文件的语言规范（webpack配置）
5. 支持webpack-dev-server热加载（gulp debug模式）