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         = require('browsersync-ssi'),
//压缩js
minify      = require('gulp-minify'),
//错误处理插件plumber
plumber     = require('gulp-plumber'),
//compass 用来编译sass
compass     = require('gulp-compass'),
//clean 用来删除文件
clean       = require('gulp-clean'),
//压缩文件
zip         = require('gulp-zip'),
//控制task中的串行和并行
runSequence = require('gulp-run-sequence'),
//中文字体文件压缩
fontSpider  = require('gulp-font-spider');

//serve任务：监听所有文件夹，如果有文件变动，则重新编译并刷新浏览器
gulp.task('serve', function() {

browserSync.init({
server: {
baseDir:["./dist"],
//index:'templates/index.html',
middleware:SSI({
baseDir:'./dist',
//index:'templates/index.html',
ext:'.shtml',
version:'2.14.0'
})
}
});
//监听各个目录的文件，如果有变动则执行相应的任务
gulp.watch("app/sass/**/*.scss", ['compass']);
gulp.watch("app/js/**/*.js", ['js']);
gulp.watch("app/img/**/*", ['image']);
gulp.watch("app/css/**/*", ['css']);
gulp.watch("app/fonts/**/*", ['font']);
gulp.watch("app/**/*.html", ['html']);
gulp.watch("dist/templates/**/*.html").on("change",browserSync.reload);
});

//compass任务，将scss编译为css
gulp.task('compass', function() {
return gulp.src('app/sass/**/*.scss')
.pipe(compass({
//设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试
sourcemap: 'true',
//输出格式设置为compressed就不需要压缩css了（nested, expanded, compact, or compressed.）
style: 'compact',
//文件目录
css: 'dist/static/css',
sass: 'app/sass',
//image: 'app/images'
}))
.on('error', function(error) {
// Would like to catch the error here
console.log(error);
this.emit('end');
})
.pipe(gulp.dest('dist/static/css'))
.pipe(browserSync.stream());
});

//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task('js', function(){
return gulp.src('app/js/**/*.js')
.pipe(plumber())
//目前没用混淆，不方便调试
//.pipe(uglify())
//.pipe(minify())
.pipe(gulp.dest("dist/static/js"))
.pipe(browserSync.stream());
});

//image任务，复制图片过去
gulp.task('image', function() {
return gulp.src("app/img/**/*")
.pipe(plumber())
.pipe(gulp.dest("dist/static/img"))
.pipe(browserSync.stream());
});

//css任务，复制外部引入的css过去
gulp.task('css', function() {
return gulp.src("app/css/**/*")
.pipe(plumber())
.pipe(gulp.dest("dist/static/css"))
.pipe(browserSync.stream());
});

//font任务，从app复制字体到dist
gulp.task('font', function() {
return gulp.src("app/fonts/**/*")
.pipe(plumber())
.pipe(gulp.dest("dist/static/fonts"))
.pipe(browserSync.stream());
});
// fontspider任务，在dist中压缩字体文件并替换。成功后会发现dist/fonts中的字体文件比app/fonts中的小了很多
gulp.task('fontspider', function() {
return gulp.src('dist/*.html')
.pipe(fontSpider());
});

//html任务，单纯的从app复制到dist
gulp.task('html', function() {
gulp.src("app/index.html").pipe(plumber()).pipe(gulp.dest("dist/"));
return gulp.src("app/*.html")
.pipe(plumber())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});

//clean任务：给下边的redist用,清空dist文件夹
gulp.task('clean', function () {
return gulp.src('dist/*', {read: false})
.pipe(clean());
});

//redist任务：先执行clean，然后再重建dist
gulp.task('redist',function(){
//先运行clean，然后并行运行html,js,compass等，最后再运行fontspider
runSequence('clean',['html','js','compass','image','css','font'],'fontspider');
});

//运行gulp：先运行redist，启动服务器
gulp.task('default',function(){
runSequence('redist','serve');
});

//publish任务，要手动执行，将dist中的文件分发到项目中的templates和static文件夹中。
//这里要注意一点：因为gulp限制了clean只能在web文件夹下执行，所以publish的时候无法自动删除工程根目录下的static和templates文件夹中的内容，只能把他们复制出去。所以，如果有改名或者删除操作的时候，要手动删除工程根目录下的static和templates文件夹下的文件，再publish，以避免冗余文件的出现。
gulp.task('publish', function(){
gulp.src('dist/*.html').pipe(plumber()).pipe(gulp.dest('../templates'));
gulp.src('dist/static/js/**/*.js').pipe(plumber()).pipe(gulp.dest('../static/js'));
gulp.src('dist/static/css/**/*').pipe(plumber()).pipe(gulp.dest('../static/css'));
gulp.src('dist/static/img/**/*').pipe(plumber()).pipe(gulp.dest('../static/img'));
gulp.src('dist/static/fonts/**/*').pipe(plumber()).pipe(gulp.dest('../static/fonts'));
});