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') });
