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’));
});