Tool-基于gulp的前端自动化构建方案的总结

最近，在公司的项目中，使用的是gulp这个构建工具，来搭建这个前端项目。之前一直没有深入的了解过，也没有真正亲自动手去实践。为了搞明白gulp的相关知识，特意查阅了相关的资料，特意总结下来。

gulp是什么

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript /coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用gulp来改变开发流程，从而使开发更加快速高效。

项目结构

首先需要搭建好项目的结构，这样各类文件的存放位置能够一目了然，同时也是为了下一步的配置路径做好准备。典型的目录结构如下（参考http://blog.csdn.net/Creabine/article/details/52182772）：

初始化npm

进入myproject目录下，通过npm init 命令来创建配置清单文件package.json，在配置文件中可以安装一些插件。常用的插件有：

• browser-sync
  保持多浏览器、多设备同步、在前端开发是非常有用，可谓是必备组件。
  安装：npm install browser-sync –save-dev

• gulp-plumber
  错误处理插件，如果不希望总是因为错误而中断任务的话，那么它几乎是必备组件。
  安装：npm install gulp-plumber –save-dev

• gulp-sass
  预编译 sass 文件为 css 文件，SASS 不多说，如果项目中有使用 sass ，那么这个插件应该是必备的。类似的项目还有 gulp-scss / gulp-sassdoc / compass
  安装： $npm install –save-dev gulp-sass

• gulp-gzip
  压缩文件
  安装：npm install gulp-gzip –save-dev

• gulp-concat
  合并文件
  安装：npm install gulp-concat –save-dev

• gulp-minify-css
  压缩css文件
  安装：npm install gulp-minify-css –save-dev

• gulp-rename
  重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
  安装：npm install gulp-rename –save-dev

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"
  }
}

gulp的安装

• 1、全局安装：

npm install -g gulp

• 2、局部安装：cd到项目根目录

npm install gulp -save-dev

构建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命令

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

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

使用中出现的问题

运行 gulp 后，出现了一下的的错误:

[Error: You need to have Ruby and Compass installed and in your system PATH for this task to work.]

错误待解决………

参考资料

http://blog.csdn.net/Creabine/article/details/52182772
http://www.cnblogs.com/kelsen/p/4643762.html