Gulp构建前后端分离的最佳实践

之前已经写过量篇博客来说Gulp了，分别是Gulp入门和使用Gulp构建前端自动化解决方案

那为什么还要第三篇呢，因为在使用的过程中，我的gulpfile.js不断完善，慢慢找到了更好的方式，所以在这里记录下来，这也应该是我的最后一篇关于Gulp本身的博客了。以后如果变动，也会继续更新在这篇博客上。

这里单纯的记录我认为的最佳实践方式，如果还不了解Gulp，建议先去看看本文开头提到的两篇博客。

下边是我在写公司官网的时候逐步修改而成的目录结构和gulpfile.js，也算是目前我所摸索出来的最佳实践，使用这种结构和gulp，可以把前后端剥离开来，所有的前端内容都放在web文件夹下，最终发布给工程使用的内容放在static和templates文件夹下，方便开发，同时也统一了各个部分的相对路径，直接在web/app文件夹下进行开发，发布之后的路径都不会有错。

工程结构：

myproject/  工程根目录
├── backfonts/  这里是后台相关的文件夹，可能有多个
│   
├── web/  在工程根目录下，创建一个web文件夹，前端的开发环境都在这个文件夹内吗，实现前后端分离
│   │
│   ├── .sass-cache/ 这里是sass编译所自动创建的文件夹
│   │
│   ├── app/   这里是开发文件，所有的编写，修改，删除都在这个文件夹下进行
│   │   └─── css  这里存放外部引入无需修改的css文件，例如：font-awesome.min.css
│   │   └─── fonts  字体文件
│   │   └─── img  图片
│   │   └─── js   js文件
│   │   └─── sass  这里存放sass文件，例如：index.scss
│   │ 
│   ├── dist/  这里是编译压缩之后的文件，供gulp使用，启动服务器并且自动刷新浏览器，方便开发
│   │   └─── static  最终发布给工程的静态文件在static中，所以这里也是，以便保持相对路径正确
│   │       └─── css  这里 外部引入的css + sass编译并压缩之后的css
│   │       └─── fonts  字体文件(字蛛压缩过的文件会直接放在这里)
│   │          └─── .font-spider （字蛛生成的文件夹，被压缩过的字体的源文件放在这里，没啥用）
│   │       └─── img  图片
│   │       └─── js   压缩过的js文件
│   │
│   ├── node_modules/  装gulp插件的时候生成的文件夹，里边放着各种各样你不用关心的文件
│   │
│   ├── gulpfile.js   编写gulp任务的文件
│   │
│   ├── package.json  记录各种信息的json
│
├── static/  最终发布给工程使用的静态文件，包括但不限于css,fonts,img,js
└── templates/  最终发布给工程使用的 模板文件，一般是html，或者jsp等等

gulpfile.js文件：

'use strict';
    //gulp
var gulp        = require('gulp'),
    //多浏览器多设备同步&自动刷新
    browserSync = require('browser-sync').create(),
    SSI         =