前端开发工作流工具

2016.5

概述

基于gulp的前端开发工作流应用实例，主要实现业务为：开发、检测、文档输出、构建打包。

功能

• 自动代理并启动本地server服务，分为src开发服务和dist测试/生产服务
• 自动或手动命令编译LESS、SASS、SCSS、STYL、JSX、COFFEE、JADE、ES6语法或模板文件
• 监听HTML、JS、CSS等文档的编译或保存，自动刷新浏览器窗口，支持多浏览器同时调试
• JS、JSX、COFFEE三种文件保存时支持自动语法检查（可配置检查项，详见.jshintrc文件）
• JS文档保存时支持自动生成说明文档
• 可使用命令对单个模块或整个项目进行构建
• 支持CMD（seaJs）模式的JS架构打包
• 支持AMD（requireJs）模式的JS架构打包
• 构建时可自动混淆CSS和JS文件
• 构建时可统一对JS文件进行语言检查
• 构建时可对CSS文档中的图片进行合并（精灵图）
• 构建时可对CSS文件中的图片转为BASE64格式
• 构建时可对静态资源生成mini文件副本

文件说明

├── Readme.md // 本工具使用说明
├── src // 项目开发源码
│ ├── html // html目录
│ │ ├── app1/mod1 // 可以为多级,根据src目录生成
│ │ │ ├── index.html // 由tpl/index.jade编译而来，或直接编写而来
│ │ │ ├── cart.html // 由tpl/cart.jade编译而来，或直接编写而来
│ │ │ ├── ...
│ │ │ ├── tpl // tpl模板目录
│ │ │ │ ├── index.jade // 例如：首页模板，保存时编译至上级目录下
│ │ │ │ ├── cart.jade // 例如：购物车页面模板，保存时编译至上级目录下
│ │ │ │ ├── _header.jade // 底杠""开头的文件为公共模板，保存时编译所有当前目录下的jade文件至上级目录下
│ │ │ │ ├── _footer.jade // 底杠""开头的文件为公共模板，保存时编译所有当前目录下的jade文件至上级目录下
│ │ │ │ ├── ...
│ │ ├── app2/mod2
│ │ │ ├── ...
│ ├── static // 静态资源目录
│ │ ├── libs // 第三方资源包，由项目成员引入的互联网第三方资源
│ │ │ ├── CMD // CMD封装模式（seajs）的第三方资源
│ │ │ │ ├── seajs // 例如：seajs及周边工具目录
│ │ │ │ ├── arale // 例如：符合CMD的arale前端工具
│ │ │ │ │ ├── popup // 例如：arale下的popup弹出层工具
│ │ │ │ │ │ ├── 1.1.6 // 例如：popup工具版本号
│ │ │ │ │ │ │ ├── popup.js // 例如：popup工具文档
│ │ │ │ ├── ...
│ │ │ ├── AMD // AMD封装模式(requireJs)的第三方资源
│ │ │ │ ├── requirejs // 例如：equirejs及周边工具目录
│ │ │ │ ├── ...
│ │ │ ├── NORM // 标准、常态的第三方资源
│ │ │ │ ├── jquery // 例如：jquery及周边工具目录
│ │ │ │ ├── ...
│ │ ├── asssets // 自主拥有权资源包，由项目成员自主开发、设计的资源，含js、css、fonts、img等
│ │ │ ├── css // css目录
│ │ │ │ ├── appName-v1.css // 例如：由 less/appName-v1.less 编译而来，或直接编写而来
│ │ │ │ ├── reset.css // 例如：由 sass/reset.less 编译而来，或直接编写而来
│ │ │ │ ├── golbal.css // 例如：由 scss/golbal.less 编译而来，或直接编写而来
│ │ │ │ ├── overlay.css // 例如：由 styl/overlay.styl 编译而来，或直接编写而来
│ │ │ │ ├── less
│ │ │ │ │ ├── appName-v1.less
│ │ │ │ │ ├── *.less
│ │ │ │ ├── sass
│ │ │ │ │ ├── reset.sass
│ │ │ │ │ ├── *.sass
│ │ │ │ ├── scss
│ │ │ │ │ ├── golbal.scss
│ │ │ │ │ ├── *.scss
│ │ │ │ ├── styl
│ │ │ │ │ ├── overlay.styl
│ │ │ │ │ ├── *.styl
│ │ │ ├── js // 存放自主开发JS工具类、或者公共JS代码
│ │ │ │ ├── ajax.js // 例如：由 coffee/ajax.coffee 编译而来，或直接编写而来
│ │ │ │ ├── calc.js // 例如：由 jsx/calc.jsx 编译而来，或直接编写而来
│ │ │ │ ├── coffee
│ │ │ │ │ ├── ajax.coffee
│ │ │ │ │ ├── *.coffee
│ │ │ │ ├── jsx
│ │ │ │ │ ├── calc.jsx
│ │ │ │ │ ├── *.jsx
│ │ │ ├── font
│ │ │ │ ├── ... // 正常存放
│ │ │ ├── img
│ │ │ │ ├── ... // 正常存放
│ │ ├── apps // 应用的静态资源目录
│ │ │ ├── app1/mod1 // 某个应用或者某个应用内的模块，可以为多级目录
│ │ │ │ ├── css
│ │ │ │ │ ├── ... // 参照 asssets/css
│ │ │ │ ├── js
│ │ │ │ │ ├── ... // 参照 asssets/js
│ │ │ │ ├── font
│ │ │ │ │ ├── ... // 参照 asssets/font
│ │ │ │ ├── img
│ │ │ │ │ ├── ... // 参照 asssets/img
│ │ │ ├── app2/mod2
│ │ │ │ ├── ...
├── dist // 构建后的项目目录
│ ├── ... // 由 src 目录下内容自动构建而成，构建后不存在需要编译的模板
├── docs // JS说明文档目录，项目中js保存或编译后自动生成至目录下，保持文件目录结构
│ ├── ...
├── node_modules // 工具依赖模块
│ ├── ...
├── package.json // 工具描述包文件
├── config // 工具配置文件目录
│ ├── config.js // 工具基础设置文件，可调整src目录和dist目录的结构以及工具运行时的各项参数
│ ├── .jshintrc // 设置本工具中js自动化检测项
│ ├── jsdoc.json // 设置本工具中js输出文档的各项参数
├── fileAttr.js // 文档属性处理脚本
├── gulpfile.js // 工具执行脚本