原文地址：前端快速开发模版
之前一直在开发移动端的单页面应用，而移动web对性能和效果要求是比较苛刻的，所以用的都是轻量级的框架体系。基本上是Zepto加自己开发的单页面框架，再加上若干简单的库。这样前端要加载的文件很小，修改起来也非常方便，同时这样的轻量级的体系使用gulp进行自动化管理也是非常合适的。
自从开发react项目后，对它的工程化和开发模式也是开了眼界，标准的框架体系就是重量级的react+redux+webpack。开发大型项目和后台管理系统用react，vue确实是不错的。但是开发一些小项目，比如前端h5之类的又有杀鸡用牛刀的感觉。
于是借鉴webpack工程化思想动手写了个前端快速开发模版，用于开发快速简洁的项目，比如之前的单页面应用。而这个项目模版就是类似前端开发的脚手架了，基本的思路就是自动化和前端编译，主要达到以下目的：
使用less预编译css，使用autoprefixer进行样式兼容
js代码用babel编译，因此可基于es6，es7编写代码
类库文件使用npm包，js文件使用browserify组织和打包，不再使用sea，require之类的加载器
html代码使用swig模版引擎进行组织和预编译
静态资源版本使用rev管理，当css或js文件内容有变化，打包时自动更新版本
前端开发基础样式，框架的整合。
工具链构建工具gulp
编译打包工具browserify
代码编译babel
css兼容autoprefixer
css预编译less
html代码预编译模版swig
前端代码版本更新rev
公共类库jQuery
Zepto
自己开发的简洁单页面框架app.js
图标fontello
字体reboto
基础样式base.css
文件目录结构css: css文件
less: less文件
js: js文件
dist: 打包生成的项目文件
layout: html母板
lib: 公共类库
template: html页面
项目自动化没有使用重量级的webpack，而是使用轻量级的gulp和browserify
公共类库公共类库的文件，主要有基础样式base.css，图标样式reboto，字体样式fontello，单页面框架app，直接拷贝到dist文件就ok。其他npm包跟nodejs项目一样在node_modules中，不需要处理。
//复制公共库目录下的所有内容 gulp.task('copy',function(){ return gulp.src('./lib/**') .pipe(gulp.dest('./dist/lib/')); });