express+gulp构建项目（三）gulp任务

这次来看一看gulp是怎么工作的。

tasks/paths.js

paths.js文件里存放的是gulp任务中需要导入的文件的路径和导出的路径。

/**
 * gulp.src 地址
 * gulp.dest 地址
 */

var commonSrc = './public/**/*';
var widgetSrc = '!./public/widget/**/*.*';
var bowerSrc = '!./public/bower_components/**/*.*';
var fileOutput = '!./public/assets/**/*.*';
var nodeModulesSrc = '!./public/node_modules/**/*.*';
var nodeModulesEtcSrc = '!./public/etc/**/*.*';
var commonDest = './public/assets';

module.exports = {
    js: {
        src: [
            commonSrc + '.js',
            widgetSrc,
            bowerSrc,
            nodeModulesSrc,
            nodeModulesEtcSrc,
            fileOutput
        ],
        dest: commonDest
    },
    node: {
        src: ['./config/**/*.js', './controllers/**/*.js', './models/**/*.js', './swig/**/*.js']
    },
    img: {
        src: [
            commonSrc + '.png',
            commonSrc + '.jpg',
            commonSrc + '.jpeg',
            commonSrc + '.gif',
            commonSrc + '.bmp',
            widgetSrc,
            bowerSrc,
            nodeModulesSrc,
            nodeModulesEtcSrc,
            fileOutput
        ],
        dest: commonDest
    },
    css: {
        src: [
            commonSrc + '.css',
            commonSrc + '.scss',
            widgetSrc,
            bowerSrc,
            nodeModulesSrc,
            nodeModulesEtcSrc,
            fileOutput
        ],
        dest: commonDest
    },
    cleanSrc: [
        './hash',
        commonDest
    ]
};

这样子把gulp任务用到的路径集中到一个文件里面好管理，也方便。

gulp任务的路径书写方式是依照node-glob的语法。

glob语法基本如下：

*：匹配该路径段中0个或多个任意字符。

js/*.js

?：匹配该路径中1个任意字符。

js/?.js

[...]：匹配指定范围内的字符，与正则语法类似。

js/a[0-3].js

*(pattern|pattern|pattern)：匹配括号中多个模型的0个或多个或任意个的组合，注意竖线|前后没有空格。

js/*(a|a1|b).js

!(pattern|pattern|pattern)：匹配不包含任何模型。

js/!(a|b).js

?(pattern|pattern|pattern)：匹配多个模型中的0个或任意1个，精确匹配，不可组合。

js/?(a|a2|b).js

+(pattern|pattern|pattern)：匹配多个模型中的1个或多个。必须至少有一个，可以是这几个模型的组合。

js/+(a|a1|b).js

@(pattern|pattern|pattern)：匹配多个模型中任意一个。精确匹配，不可组合，必须有一个，不可为空。

js/@(a|a1|b).js

**：可以匹配任何内容,但**不仅匹配路径中的某一段,而且可以匹配 'a/b/c' 这样带有'/'的内容,所以,它还可以匹配子文件夹下的文件。

**/@(a|a1|b).js

gulp_build.js

gulp_build文件是gulp任务主文件。

var gulp = require('gulp');//引入gulp自动化工具
var gulpif = require('gulp-if');//有条件的执行gulp任务
var runSequence = require('run-sequence');//运行多个gulp任务
var argv = require("yargs").argv;//接收用户在命令行输入的参数  例如：gulp build -s 中的 -s
var clean = require('gulp-clean');//删除文件或文件夹
var path = require('path'); //path模块用于处理和转换文件路径
var RevAll = require('gulp-rev-all-fixed');//静态资源版本迭代，解决文件缓存问题，其实就是给文件名后加上哈希值
var uglify  = require('gulp-uglify');//js压缩
var cssmin = require('gulp-cssmin');//css压缩
var replace = require('gulp-replace');//字符串替换插件
var sass = require("gulp-sass");//预处理sass
var bower = require('gulp-bower');//下载bower包

var taskPaths = require('./tasks/paths'); //引入gulp任务所需要的路径

var jsonfile = require('jsonfile');//创建和解析json文件
var imgHashFile = {};

function getRevOpts(isDev) {//给gulp-rev-all-fixed模块生成选项的方法
    var opt = {
        hashLength: 12, //哈希值长度
        transformFilename: function (file, hash) {
            var ext = path.extname(file.path); //获取扩展名
            var suffixes = isDev ? '' : '.' + hash.substr(0, 6); //获取哈希值前六位

            if (ext.indexOf('scss') > 0) {//如果是scss文件，就变成css扩展名
                ext = '.css';
            }

            return path.basename(file.path, ext) + suffixes + ext;
            //path.basename(path, ext)返回路径的最后一段，例如./name/abc.html 则会返回abc.html
            //path.extname(path, ext)返回路径最后一段的扩展名，例如./name/abc.html 则返回.html
            //不带扩展名的基础文件名，后面连上哈希值，最后连上处理过的扩展名返回
        }
    };

    return opt;
}

gulp.task('bower', function() {//bower任务，下载bower插件到以下目录
    return bower({ directory: './public/bower_components' });
});

//clean任务，删除hash和assets文件夹下的文件，read: false参数使gulp不读取文件内容就进行删除，使操作变快
gulp.task('clean', function () {
    return gulp.src(taskPaths.cleanSrc, { read: false })
        .pipe(clean());
});

var temmoGulp = {
    buildJs: function (src, dest, isDev, isWatching) {
        var opts = {
            fileNameManifest: 'js_hash.json',
            hashLength: getRevOpts(isDev).hashLength,
            transformFilename: getRevOpts(isDev).transformFilename
        };
        //gulp-rev-all-fixed选项，
        //fileNameManifest，hash文件自定义命名
        //transformFilename，自定义命名方法
        var revAll = new RevAll(opts);//在将流导入revAll.revision()处理之前先要实例化RevAll对象

        return gulp.src(src)
            .pipe(uglify())
            .pipe(revAll.revision())
            .pipe(gulp.dest(dest))
            .pipe(revAll.manifestFile()) //生成hash名单文件
            .pipe(gulpif(!isWatching, gulp.dest('./hash'))); //将hash名单文件导入hash文件夹

    },
    buildImg: function (src, dest, isDev, isWatching) {
        var opts = {
            fileNameManifest: 'img_hash.json',
            hashLength: getRevOpts(isDev).hashLength,
            transformFilename: getRevOpts(isDev).transformFilename
        };
        var revAll = new RevAll(opts);

        return gulp.src(src)
            .pipe(revAll.revision())
            .pipe(gulp.dest(dest))
            .pipe(revAll.manifestFile())
            .pipe(gulpif(!isWatching, gulp.dest('./hash')));
    },
    buildCss: function (src, dest, isDev, isWatching) {
        var opts = {
            fileNameManifest: 'css_hash.json',
            hashLength: getRevOpts(isDev).hashLength,
            transformFilename: getRevOpts(isDev).transformFilename
        };
        var revAll = new RevAll(opts);

        var compassImporter = function(url, prev, done) {
            if (!/^compass/.test(url)) {
                return done({ file: url }); //如果url中不含compass
            }

            done({ file: 'compass-mixins/lib/' + url });
        };
        //url是当前导入的路径，prev是上一次处理的路径，done是可选回调函数

        //outputStyle最终输出css的风格
        //importer处理当遇到@import导入
        //includePaths一个路径的数组让Libsass可以解决@import声明
        //data传递给Libsass渲染
        return gulp.src(src)
            .pipe(sass({
                outputStyle: 'compressed',
                importer: compassImporter,
                includePaths: [ 'node_modules' ],
                data: '@import "compass"; .transition { @include transition(all); }'
            }))
            .pipe(sass().on('error', sass.logError))
            .pipe(cssmin()) //压缩css
            .pipe(replace(/(\.\.\/.*?(jpg|jpeg|gif|png|bmp){1})/mg, function ($1) {
                //replace第二个参数如果是函数，每个匹配都调用该函数，它返回的字符串将作为替换文本使用
                //$1参数是匹配到的字符串
                var img = $1;
                var imgRal = img.replace(/((\.\.\/){1,})(.*?(jpg|jpeg|gif|png|bmp){1})/g, '$1');

                try {
                    imgHashFile = jsonfile.readFileSync('./hash/img_hash.json'); //读取img hash名单
                } catch (e) {
                    imgHashFile = {};
                }

                for (var key in imgHashFile) {//循环img hash名单

                    if ((imgRal + key) === $1) {
                        img = '/static/assets/' + imgHashFile[key];

                        break;
                    }
                }

                return img; //将css中图片url文件名变为带hash的文件名
            }))
            .pipe(revAll.revision())
            .pipe(gulp.dest(dest))
            .pipe(revAll.manifestFile())
            .pipe(gulpif(!isWatching, gulp.dest('./hash')));
    }
};

var build = function () {
    // 是否监听
    var isDev = argv.dev === true;//若在命令行输入了dev参数，则isDev为真

    gulp.task('js', function () {
        return temmoGulp.buildJs(taskPaths.js.src, taskPaths.js.dest, isDev);
    });

    gulp.task('img', function () {
        return temmoGulp.buildImg(taskPaths.img.src, taskPaths.img.dest, isDev);
    });

    gulp.task('css', function () {
        return temmoGulp.buildCss(taskPaths.css.src, taskPaths.img.dest, isDev, false);
    });

    runSequence('clean', 'bower', 'js', 'img', 'css'); //顺序执行相关任务
};

gulp.task('build', function () { //build任务包含clean,下载bower包，处理js，处理img，处理css
    return build();
});

var getFileName = function (str) {
    var reg = /[^\\\/]*[\\\/]+/g; //获取路径里的文件名
    str = str.replace(reg, '');

    return str;
};

var getSinglePath = function (file) {
    var filePath = file.path,
        destPath,
        fileName = getFileName(file.path);

    filePath = filePath.replace(/(\\|\/)/img, '%'); 
　　//将路径里的/和\换成%
    filePath = filePath.substring(filePath.indexOf('%public%')); 
　　//从$public%开始截取
    filePath = '.' + filePath.replace(/%/img, '/'); 
　　//将%替换回/，导入路径

    destPath = filePath.replace(eval('/(' + fileName + ')$/mg'), ''); 
　　//去掉文件名
    destPath = destPath.replace(eval('/\.\\/public\\//'), ('./public/assets/')); 
　　//导出路径为./public/assets/下

    return {
        filePath: filePath,
        destPath: destPath
    };
};

gulp.task('watch', function () { //监控js，css，img的变动，如果变动，重新执行处理任务
    gulp.watch(taskPaths.css.src, function (file) {
        var paths = getSinglePath(file);

        gulp.task('watchCss', function () {
            return temmoGulp.buildCss(paths.filePath, paths.destPath, true, true);
        });

        runSequence('watchCss');
    });

    gulp.watch(taskPaths.js.src, function (file) {
        var paths = getSinglePath(file);

        gulp.task('watchJs', function () {
            return temmoGulp.buildJs(paths.filePath, paths.destPath, true, true);
        });

        runSequence('watchJs');
    });

    gulp.watch(taskPaths.img.src, function(file) {
        var paths = getSinglePath(file);

        gulp.task('watchImg', function () {
            return temmoGulp.buildImg(paths.filePath, paths.destPath, true, true);
        });

        runSequence('watchImg');
    });
});

package.json里的scripts里的命令就是执行的gulp命令：

"scripts": {
    "start": "node ./bin/www",
    "dev": "./node_modules/.bin/gulp develop --gulpfile gulp_dev.js",
    "ci": "./node_modules/.bin/gulp test --gulpfile gulp_test.js",
    "assets": "./node_modules/.bin/gulp build --gulpfile gulp_build.js",
    "assets_dev": "./node_modules/.bin/gulp build --dev --gulpfile gulp_build.js",
    "watch": "./node_modules/.bin/gulp watch --gulpfile gulp_build.js"
  }

npm run assets 是执行了gulp build，处理js，css，img等静态资源；npm run dev是执行了gulp develop，启动node服务；npm run watch执行gulp watch监听文件的变动。

gulp_dev.js

这个文件里是启动服务的gulp任务。

var gulp = require('gulp');
var nodemon = require('gulp-nodemon'); //监控文件变化，有变化则立即重启服务

gulp.task("develop", function () {
    nodemon({
        script: "bin/www",
        ext: "js",
        ignore: ['./public', './node_modules']
    }).on("restart", function () {
        console.log('restart');
    });
});

gulp_test.js

执行eslint检测

var gulp = require('gulp');
var runSequence = require('run-sequence');
var eslint =  require('gulp-eslint');

var taskPaths = require('./tasks/paths');

gulp.task('eslint_node', function () {
    return gulp.src(taskPaths.node.src)
        .pipe(eslint({
            useEslintrc: './node.eslintrc'
        }))
        .pipe(eslint.format())
        .pipe(eslint.failOnError());
});

gulp.task('test', function () {
    runSequence('eslint_node')
});