利用gulp打造前端集成开发环境二--文件合并篇

[fredshare]

目标

若干文件自定义合并

步骤

• 下载gulp-concat插件

npm install --save-dev gulp-concat

• 新建一个json文件，叫merge.json，里面包含需要进行合并的文件列表，如下：

[{
    "src": [
            "/lib/jquery.js", 
            "/lib/template.js", 
            "/lib/json2.js",
            "/lib/prototype.js"
        ],
    "dest": "/lib/lib_combo.js"
}]

• 修改gulpfile，执行任务

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var paths = {
  scripts: {
    source : '../src/js/**/*.js',
    release: '../release/js'
  },
  css : {
    source : '../src/css/**/*.css',
    release : '../release/css'
  },
  html : {
    source : '../src/html/**/*.html',
    release : '../release/html'
  }  
};
process.on('uncaughtException', function(err) {
    console.log(err);
})
/*
 * 文件压缩
 */
gulp.task('move', function() {
 gulp.src(paths.scripts.source,"!" + paths.scripts.source + "/lib/*.js")
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts.release));
});
//js合并任务(读取合并配置)
gulp.task('merge', function() {
    var data = require('./merge.json');
    data.forEach(function(o) {
        var arr = [];
        o.src.forEach(function(s) {
            arr.push(paths.scripts.source + "/" + s);
        });
        o.src = arr;
        gulp.src(o.src).pipe(concat(o.dest)).pipe(gulp.dest(paths.scripts.release));
    });
});
gulp.task('default', ["merge","move"], function() {

});

同时看到我们把move任务中取出了common/lib文件夹的处理。