使用Gulp构建前端自动化解决方案

前一篇博客写了Gulp入门，这里详细的介绍一下如何用Gulp构建适合自己的前端工作流。

我在学习的时候看了挺多资料，最后在kelsen大大的博客学会了，感觉通俗易懂，一步步做过去就好了。

实际中每个人的需求不用，通过gulp以及其他相关插件进行搭配，都能够满足不同的需求，所以我最后的流程也跟上边那位kelsen大大的不太一样。我在这里会详细注释每个语句，因为在我自己学习的过程中，由于对node.js理解有限，所以时不时遇到很多困惑。希望通过我详尽的注释，能够让初次接触Gulp的同学们能够一目了然，了解他的工作原理之后，就可以很容易的按照自己的思路来搭建适合自己的前端工作流。

这里默认你已经安装好了node.js 和 gitbash。

首先在你需要的地方建立工程目录，好的目录就是工程的骨架，让结构一目了然，便于维护管理，这方面我木有经验，直接借用上边kelsen大大博客中的结构：

myproject/
├── app/
│   ├── sass/
│   │   └─ main.scss
│   ├── scripts/
│   │   └─ javascript.js
│   └── index.html
├── dist/
└── release/

初始化npm

在myproject目录下打开gitbash，执行npm init，创建一个package.json文件，这样其他人浏览工程的时候，只要看这个文件，就知道工程的各种基本信息以及依赖的模块了。
下面是我最终的package.json：

{
  "name": "daren",
  "version": "1.0.0",
  "description": "Daren Official website",
  "main": "index.js",
  "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
},
  "author": "Creabine",
  "license": "ISC",
  "devDependencies": {
 "browser-sync": "^2.14.0",
 "browsersync-ssi": "^0.2.4",
 "gulp": "^3.9.1",
 "gulp-clean": "^0.3.2",
 "gulp-compass": "^2.1.0",
 "gulp-concat": "^2.6.0",
 "gulp-minify": "0.0.14",
 "gulp-minify-css": "^1.2.4",
 "gulp-plumber": "^1.1.0",
 "gulp-run-sequence": "^0.3.2",
 "gulp-uglify": "^2.0.0",
 "gulp-zip": "^3.2.0",
 "plumber": "^0.4.8"
}
}

在你刚做完第一步的时候是没有devDependencies这一项的，因为你还没有安装任何依赖模块。

安装所需的模块

通过npm installpackageName –save-dev 命令来安装上边devDependencies中显示的各个依赖模块。
在安装或删除博快的时候带上–save-dev是个好习惯，他会同时改变你的package.json中的devDependencies对应的值。来保证信息的准确性。
由于墙的存在，安装模块可能会很慢或者很久不响应，国内可以使用cnpm镜像安装，但是我在使用cnpm的时候遇到了其他奇怪的麻烦（安装时莫名的多出了许多其他文件），所以这里建议直接挂个VPN好了。

构建Gulp任务

Gulp用来协调指挥其他模块的工作。首先在myproject文件夹下新建gulpfile.js文件，gulp会运行这个文件中的js，我的文件最终内容如下：

//使用严格模式的js。保证js的严谨，作为一个好习惯。
'use strict';

//使用require引入所有需要的模块，这是node.js语法，不了解的话记住就行了。
//gulp
var gulp        = require('gulp'),
//多浏览器多设备同步&自动刷新
    browserSync = require('browser-sync').create(),
    SSI         = require('browsersync-ssi'),
//整合文件
    concat      = require('gulp-concat'),
//混淆js 暂时没用到
    uglify = require('gulp-uglify'),
//压缩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中的串行和并行。这个很重要，它能够严格规定task的执行顺序，否则gulp默认并行，有些时候会产生问题。如先清空再重建文件，可能重建过程中又清空了。
    runSequence = require('gulp-run-sequence');
//上边引入模块之后，下面开始编写任务:

//创建一个名为serve的任务，该任务的内容就是匿名函数中的内容。
gulp.task('serve', function() {
//使用browserSync创建服务器，自动打开浏览器并打开./dist文件夹中的文件（默认为index.html）
    browserSync.init({
        server: {
            baseDir:["./dist"],
            middleware:SSI({
                baseDir:'./dist',
                ext:'.shtml',
                version:'2.10.0'
            })
        }
    });
//监听各个目录的文件，如果有变动则执行相应的任务操作文件
    gulp.watch("app/sass/**/*.scss", ['compass']);
    gulp.watch("app/javascript/**/*.js", ['js']);
    gulp.watch("app/**/*.html", ['html']);
//如果有任何文件变动，自动刷新浏览器
    gulp.watch("dist/**/*.html").on("change",browserSync.reload);
});

//下面来分别看看处理各个部分的任务：

//compass任务，将scss编译为css
gulp.task('compass', function() {
//首先取得app/sass下的所有后缀为.scss的文件（**/的意思是包含所有子文件夹）
return gulp.src('app/sass/**/*.scss')
        .pipe(compass({
//设置生成sourcemap，在调试器中显示样式在scss文件中的位置，便于调试
          sourcemap: 'true',
//输出格式设置为compressed就不需要压缩css了
          style: 'compressed',
//文件目录
          css: 'dist/stylesheets',
          sass: 'app/sass',
          image: 'app/images'
        }))
//如果有错误输出错误提示
        .on('error', function(error) {
// Would like to catch the error here
          console.log(error);
this.emit('end');
        })
//编译后的文件放入dist/stylesheets下
        .pipe(gulp.dest('dist/stylesheets'))
//自动刷新浏览器
        .pipe(browserSync.stream());
});


//js任务，将js压缩后放入dist。该任务要在clean-scripts任务完成后再执行
gulp.task('js', function(){
//首先取得app/javascript下的所有后缀为.js的文件（**/的意思是包含所有子文件夹）
return gulp.src('app/javascript/**/*.js')
//错误管理模块
        .pipe(plumber())
//目前没用混淆，不方便调试
//.pipe(uglify()) 
//js压缩
        .pipe(minify())
//输出到dist/javascript
        .pipe(gulp.dest("dist/javascript"))
//自动刷新浏览器
        .pipe(browserSync.stream());
});



//html任务，目前什么都没做。只是单纯的把所有html从开发环境app复制到测试环境dist
gulp.task('html', function() {
return gulp.src("app/*.html")
        .pipe(plumber())        
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

//publish任务，需要的时候手动执行，将dist中的文件打包压缩放到release中。
gulp.task('publish', function(){
//取得dist文件夹中的所有文件
return gulp.src('dist/**/*')
//错误处理模块
        .pipe(plumber())
//压缩成名为publish.zip的文件
        .pipe(zip('publish.zip'))
//放入release文件夹
        .pipe(gulp.dest('release'))
});
//clean任务：清空dist文件夹，下边重建dist的时候使用
gulp.task('clean', function () {
return gulp.src('dist/*', {read: false})
    .pipe(clean());
});

//redist任务：需要时手动执行，重建dist文件夹：首先清空，然后重新处理所有文件
gulp.task('redist',function(){
//先运行clean，然后并行运行html,js,compass
    runSequence('clean',['html','js','compass']);
});
//建立一个名为default的默认任务。当你在gitbash中执行gulp命令的时候，就会
gulp.task('default', function(){
//先运行redist，启动服务器
    runSequence('redist','serve');
});

使用

执行gulp，会自动打开浏览器，并显示index.html文件。当改动任意文件，自动编译到dist文件夹并且自动刷新浏览器。

如果有改动文件名，编译新文件后，旧文件依然保留。此时可以直接执行gulp redist来重建dist文件夹。

写在最后

经过详细的注释，应该很简明易懂了，希望能帮到跟我一样曾经纠结过的小伙伴。花点时间熟悉搭建起来，能够大幅提高工作效率，光是不用狂按ctrl+F5,就爽的没边儿啦，哈哈哈，共勉~