今天的命题是，制作几个到几十个基于Bootstrap的页面模板，然后交给后端程序员，也就是说，我要做的并不是业内讨论最多的全栈开发，而是只负责给后端程序员提供网页代码。
基础知识
一般网站往往架构在后端MVC框架中，由后端程序猿做主导，所以：
1、前端程序猿要对后端MVC框架有基本的了解，尤其是MVC中的V。
2、懂得V之后，就要掌握模板引擎的规则。前端模板引擎跟后端模板引擎很相似，做一些字符替换就可以将前端引擎的代码段改成后端引擎的。
我在参考了一些简单项目的前端工作流之后，搞了这么一个简单的前端工作流。
项目目录
项目目录的设定可谓众说纷纭，各有各的设定方案，比如静态目录的命名，有人用public，有人用static……我认为没必要太纠结，原因是，你作为前端开发者，你的项目目录是要先跟后端程序猿协商的，后端开发者有他的一整套目录设定方式，他设定的目录结构才是真正在服务器上体现的目录结构，所以，前端项目的目录设定原则，是为了让自己方便开发，也为了方便的传到测试服务器的指定目录中。
再简单点说，前端项目的目录结构，只要能保证前端开发者以最一目了然、最高效的方式做开发，上传到测试服务器可以直接用，就可以了。
基于上述的原则，我把项目目录分为7个子目录：
api：模拟网站API。
media：内容视频、内容音频。
img：网站所用的内容图片。
libs：js库和css库。
work：工作目录，所有需要编写的模板（利用gulp-include组合HTML代码）、html、js和css都在里面。
build：构建目录也是测试目录，用于本地预览和测试，测试通过的话，就生成dist目录里的内容
dist：交付目录，build跟dist的区别是，build的css和js文件都没有合并，更没有压缩，html文件也没有压缩，而dist的所有文件都经过了合并、压缩，并且还有一些其他的后置处理措施，比如后端会让你把合并起来的HTML再拆开，因为你的HTML只是后端MVC的V，V是需要拆成各种模块的，而且后端还会对模板做一些修改，比如加入各种模板标签，这些都应该由后端跟前端商议好，由前端利用gulp完成。
方案的制定原则是：
1、保证工作目录、开发目录和上线目录的内容尽可能的简单。因为html/tpl/js/css是最常编辑的文件，而内容图片、API很少修改，库、字体更是不会修改，所以都应该择出来。
2、img文件夹内存放内容图片，它不用编辑，所以择出来。但是注意，它需要一个监视器来监视文件的添加，一旦有添加，就自动压缩体积，然后覆盖源图。
3、libs文件夹的定位是：存放js库和css库以及字体库。
4、api文件夹的定位是：开发的时候使用，上线不用，所以单独存放。
5、media文件夹：存放视频和音频。如果你确定你的项目绝没有可能用到音频和视频，那么这个文件夹可以取消。
.
│
├─api 模拟网站API，存放各种json文件
├─dist 略过
├─build
│ ├─css 由scss编译的css
│ │ ├─global 全站共用css以及bg
│ │ └─index 单页使用css以及bg
│ ├─html
│ │ index.html 单页
│ │
│ └─js
│ ├─global 全站共用js
│ └─index 单页使用js
├─img 内容图片
├─libs js库和css库以及字体库
├─media 视频和音频
└─work
├─scss
│ ├─global 全站共用scss以及bg
│ └─index 单页使用scss以及bg
├─html
│ index.html 单页
│
├─js
│ ├─global 全站共用js
│ └─index 单页使用js
└─tpl
├─global 全站共用tpl
└─index 单页使用tpl
技术选型
只兼容IE8和以上，特选型如下：
Bootstrap 3最新版 + 插件
jQuery 1版本 + jQuery插件 + 第三方库
gulp
SASS
基本文件准备
api
留空
dist
留空，本文不涉及上线环节
build
可以留空，依赖gulp创建文件夹和文件
libs
js库和css库按照项目名建立文件夹，不要在路径中包含版本号。版本号的更新方式是以新版本文件覆盖老文件，然后HTML中修改路径的版本号参数。
字库，比如glyphicons-halflings和Font Awesome，都跟随同名css库存放，如果有其他字库，比如fa和阿里的iconfont，也当做css库存放进来。
work
html
将一个html骨架文件放到html目录，命名为index.html
tpl
1、建立global文件夹，放共用的tpl区块文件
2、建立index文件夹，放index.html相关的tpl区块文件
scss
1、建立global文件夹，放共用的区块用的css文件
2、建立index文件夹，放index.html相关的区块用的css文件
js
1、建立global文件夹，放共用的区块用的js文件
2、建立index文件夹，放index.html相关的区块用的js文件
img
1、建立global文件夹，放共用的区块用的img文件
2、建立index文件夹，放index.html相关的区块用的img文件
media
如果全站总共需要几个或少于50个media文件，那么没必要分文件夹。如果有几百个，需要按下面的方式建立文件夹。
1、建立global文件夹，放共用的区块用的media文件
2、建立index文件夹，放index.html相关的区块用的media文件
处理Bootstrap
把Bootstrap 3.3.7-sass的源代码下载下来之后我们看一下。
js源文件：/assets/javascripts/
scss源文件：/assets/stylesheets/
把放到下面对应的文件夹里。
bootstrap
│
├─jssrc
├─scss
然后把bootstrap放到libs文件夹中。
Bootstrap的特殊之处是它是我们项目里唯一的需要定制然后编译的库，其他的库都无需修改。所以，未来定制好bs之后，要把编译好的css文件、js文件也放到bootstrap文件夹里，也就是：
bootstrap
│
├─css
│ bootstrap.css
│ bootstrap.css.map
│ bootstrap.min.css
│ bootstrap.min.css.map
│ bootstrap-flex.css
│ bootstrap-flex.css.map
│ bootstrap-flex.min.css
│ bootstrap-flex.min.css.map
│ bootstrap-grid.css
│ bootstrap-grid.css.map
│ bootstrap-grid.min.css
│ bootstrap-grid.min.css.map
│ bootstrap-reboot.css
│ bootstrap-reboot.css.map
│ bootstrap-reboot.min.css
│ bootstrap-reboot.min.css.map
├─js
│ bootstrap.js
│ bootstrap.js.map
│ bootstrap.min.js
│ bootstrap.min.js.map
├─jssrc
├─scss
gulp和其他包
gulp和其他包需要安装在你的本地服务器的根目录，这样它们可以操纵你的服务器根目录里面的所有文件。
更高层的目录结构
服务器根目录下，应新建一个项目，比如叫tuangou，假设咱们要搞个团购网站。里面就按照上面我说的工作流的目录建。
本机虚拟主机设置
虚拟主机应当指向项目目录。预览build/html文件夹里的HTML的话，就用这个虚拟域名即可。虚拟域名要在hosts文件中也设好。
虚拟域名和本机IP要告诉后端程序猿。
测试服务器设置
根据与后端程序猿的商定方针，你按规定，把dist里面的相关文件上传到测试服务器即可。
