gulp多任务

功能

1. 同时处理多个web文件
2. css js 压缩合并
3. 资源版本号替换
4. 监听资源变化，进行压缩合并操作

项目结构

/resources
    /common                //common源文件
    /js
    /sass
    /libs                  //资源库文件
    /dist
        /testA
            lib.min.js
            lib.min.css
            testA.js
            testA.css
        /testB
            lib.min.js
            lib.min.css
            testB.js
            testB.css
        /common  
            common.css
            common.js  

/resources/common 是公共的common.css common.js 源文件， 构建后在 /dist/common/ 下
/resources/sass, resources/js 是.scss .js 源文件

单web配置文件

testA_gulp.js
    export {
        libsJs : 'xxx',
        libsCss : 'xxx',
        filename : 'testA',
        mainCss : 'testA.scss',
        mainJs : 'testA.js'
    }

testB_gulp.js
    export {
        libsJs : 'xxx',
        libsCss : 'xxx',
        filename : 'testB',
        mainCss : 'testB.scss',
        mainJs : 'testB.js'
    }

CLI

gulp [taskType] [–file testA[,testB]]

taskType

default : 默认包含 common 和 config
common : 公共资源 /common 的构建
config ：web资源的构建，即 lib.min.css lib.min.js file.css file.js, 生成在 /dist/file 文件夹下
version ： replace 替换的方法 更新版本号

不加 –file 参数，则会将 /gulpTask 下的配置文件都读取
–file testA,testB 多文件用 , 隔开

package.json

{
"devDependencies": {
    "gulp": "*",
    "gulp-asset-rev": "*",
    "gulp-autoprefixer": "*",
    "gulp-changed": "*",
    "gulp-concat": "*",
    "gulp-csslint": "*",
    "gulp-csso": "*",
    "gulp-htmlmin": "*",
    "gulp-jshint": "*",
    "gulp-load-plugins": "*",
    "gulp-rename": "*",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sass": "*",
    "gulp-uglify": "*",
    "gulp-util": "*",
    "jshint": "*",
    "run-sequence": "*",
    "wrench": "^1.59",
    "gulp-replace": "*"
},
"engines": {
    "node": ">=4.0"
}
}

gulpfile.js

var wrench = require('wrench'),
    gulp = require('gulp'),
    replace = require('gulp-replace'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    csso = require('gulp-csso'), 
    concat = require('gulp-concat') ;

var resDir = '../resources/';
var minimist = require('minimist');
var knownOptions = {
string: 'file',
default: ''
};
var options = minimist(process.argv.slice(2), knownOptions);
if ( options.file ){
    var fileArr = options.file.split(','),
        configs = [] ;
    for ( var i=0,len=fileArr.length; i<len; i++ ){
        configs.push(require('./gulpTask/'+fileArr[i]+'_gulp.js'));
    }
}
else{
    var configs = wrench.readdirSyncRecursive('./gulpTask').filter(function(file) {
    return (/^\w+_gulp\.js$/g).test(file);
    }).map(function(file) {
    return require('./gulpTask/' + file);
    });
};

gulp.task('common', commonTask);
gulp.task('config', function(){
configs.map(function(v){
    configTask(v);
});
});

gulp.task('default', ['common', 'config']);

// 给 .js .css 文件加时间戳
var timestamp = Date.now();
gulp.task('version', function(){
configs.map(function(v){
    version(v);
});
});

function version(v){  
gulp.src(resDir+v.fileDir+v.filename+'.vm')
    .pipe(replace(/\/((\w|-|\.)+)\.js(\?v=\w+)?/g, '/$1.js?v='+timestamp))
    .pipe(replace(/\/((\w|-|\.)+)\.css(\?v=\w+)?/g, '/$1.css?v='+timestamp))
    .pipe(gulp.dest(resDir+v.fileDir));
}

function commonTask(){
var commonCss = resDir+'common/*.css',
    commonJs = resDir+'common/*.js'  ;
gulp.task('jsCommon', function(){
    return gulp.src(commonJs)
            .pipe(uglify())
            .pipe(gulp.dest(resDir+'dist/common'));
});

gulp.task('cssCommon', function(){
    return gulp.src(commonCss)
        .pipe(csso())
        .pipe(gulp.dest(resDir+'dist/common'));
});

gulp.watch(commonJs, ['jsCommon']);
gulp.watch(commonCss, ['cssCommon']);
gulp.start(['jsCommon', 'cssCommon']);
}


function configTask(config){
var libsJs = config.libsJs,
    libsCss = config.libsCss,
    filename = config.filename,
    mainCss = resDir+config.mainCss,
    mainJs = resDir+config.mainJs ;
libsJs = libsJs.map(function(v){
    return (v = resDir + v);
});
libsCss = libsCss.map(function(v){
    return (v = resDir + v);
});
gulp.task('jsLibs:'+filename, function(){
    return gulp.src(libsJs)
        .pipe(uglify())
        .pipe(concat('libs.min.js'))
        .pipe(gulp.dest(resDir+'dist/'+filename));
});

gulp.task('jsMain:'+filename, function(){
    return gulp.src(mainJs)
            .pipe(uglify())
            .pipe(gulp.dest(resDir+'dist/'+filename));
});

gulp.task('jsInit:'+filename, ['jsLibs:'+filename, 'jsMain:'+filename]);
gulp.task('jsWatch:'+filename, function(){
    gulp.watch(libsJs, ['jsLibs:'+filename]);
    gulp.watch(mainJs, ['jsMain:'+filename]);
});

gulp.task('cssLibs:'+filename, function(){
    return gulp.src(libsCss)
        .pipe(csso())
        .pipe(concat('libs.min.css'))
        .pipe(gulp.dest(resDir+'dist/'+filename));
});

gulp.task('cssMain:'+filename, function(){
    return gulp.src(mainCss)
        .pipe(sass())
        .pipe(csso())
        .pipe(gulp.dest(resDir+'dist/'+filename));
});
gulp.task('cssInit:'+filename, ['cssLibs:'+filename, 'cssMain:'+filename]);
gulp.task('cssWatch:'+filename, function(){
    gulp.watch(libsCss, ['cssLibs:'+filename]);
    gulp.watch(mainCss, ['cssMain:'+filename]);
});

gulp.task('init:'+filename, ['jsInit:'+filename, 'cssInit:'+filename]);
gulp.task('watch:'+filename, ['jsWatch:'+filename, 'cssWatch:'+filename]);
gulp.start(['init:'+filename, 'watch:'+filename]);
}