日常開發(fā)中,經(jīng)常會需要用到單個未經(jīng)過合并的js文件或者css文件另做他用盟榴,這時候团滥,統(tǒng)一合并js和css就不合適了!
直接上代碼
var gulp = require('gulp'),
rev = require('gulp-rev'),
gulpMerge = require('gulp-merge');
gulp.task('dev-app',function() {
var apptool = gulp.src(appjsSrc).pipe(concat('apptool.js'));
return gulpMerge(gulpMerge(
gulp.src(['src/js/apporder.js','src/js/appsale.js']),
gulp.src(appCssSrc)
.pipe(concat('appcss.css'))
),apptool)
.pipe(rev())
.pipe(gulp.dest('dev/app'))
.pipe(rev.manifest('rev-app.json',{publicPath:'app/'}))
.pipe(gulp.dest('dev/version'));
});
這里做一下備注
- appjsSrc和appCssSrc分別為js和css的相對路徑(需要用到的js和css)各淀。
- gulp-merge合并兩個任務,超出兩個之后的解析不出來诡挂,這里需要研究一下源碼碎浇。
- gulp-rev做了修改,因為源碼中沒有==publicPath==這個變量璃俗,所以需要作出修改奴璃,作用為給生成的json文件的key值加上路徑,可以用在CDN上面旧找,下面貼出修改的源碼部分溺健。
- 合并所有的任務以后,把合并后的文件和匹配到的文件命名為帶hash的文件名
修改的gulp-rev的源碼部分
//gulp-rev下面的index.js
opts = objectAssign({
path: 'rev-manifest.json',
merge: false,
// Apply the default JSON transformer.
// The user can pass in his on transformer if he wants. The only requirement is that it should
// support 'parse' and 'stringify' methods.
transformer: JSON
}, opts, pth);
//修改為
opts = objectAssign({
path: 'rev-manifest.json',
merge: false,
// Apply the default JSON transformer.
// The user can pass in his on transformer if he wants. The only requirement is that it should
// support 'parse' and 'stringify' methods.
transformer: JSON,
publicPath:''
}, opts, pth);
manifest[originalFile] = revisionedFile;
//修改為
manifest[originalFile] = opts.publicPath+revisionedFile;