gulpfile.js:rev.manifest()没有合并几个JS任务

时间:2016-04-04 15:48:17

标签: gulp gulp-concat gulp-rev

下面的代码没有正确合并rev-manifest.json文件。 我循环了几个JS任务,只有一个被合并,尽管正在创建和存储哈希文件。

我已经尝试了很多东西,我检查了gulp-rev和一些用户接缝有类似的问题。其中一些正在创建几个清单文件,并在最后继续进行实际合并。我想放弃这个解决方案,因为它很慢而且很难看。

如果我评论concat(...)行,清单文件会注册所有JS任务。

这是一个BUG还是我在这里遗漏了什么?

gulp 3.9.1 gulp-concat 2.6.0 gulp-rev 7.0.0

var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');

var jsFiles = {
	task1: [
		'./path/file1.js'
	],
	task2: [
		'./path/file2.js',
    	'./path/file2.js'
	]
};


function jsTask(key) {
	gulp.task(key, function() {
		gulp.src(jsFiles[key])
			.pipe(jshint())
			.pipe(jshint.reporter('default'))
			.pipe(uglify())
			// IT WORKS WHEN I COMMENT THIS LINE
			.pipe(concat(key + '.min.js'))
			.pipe(rev())
			.pipe(gulp.dest('./public/js'))
			.pipe(rev.manifest({merge:true }))
        	.pipe(gulp.dest('.'));
	});
}


gulp.task('less', function() {
	return gulp.src(['./path/less/*.less'])
		.pipe(less({errLogToConsole: true}))
		.pipe(minifycss())
		.pipe(rev())
		.pipe(gulp.dest('./path/public/css'))
		.pipe(rev.manifest({merge:true }))
        .pipe(gulp.dest('.'));
});


for (var key in jsFiles) {
	jsTask(key);
}


var defaultTasks = ['less'];
for (var key in jsFiles) {
	defaultTasks.push(key);
}

gulp.task('default', defaultTasks);

2 个答案:

答案 0 :(得分:0)

I would suggest using gulp-useref instead of gulp-concat.

Given your setup, I think key references a glob path, or at least I hope so. Otherwise you are trying to concatenate a single file, or no files which may crash the concat plug-in. Emphasis on may.

Also, since you are using gulp-rev, I suggest using gulp-rev-replace which will automatically update your index references to the reved files.

Edit


Sometimes rev.manifest behaves in ways that I would describe as buggy. Just to exhaust all possibilities remove the merge option for the manifest and run concat. Or run concat and remove manifest altogether.

答案 1 :(得分:0)

您可以将要创建的清单文件的名称(每个gulp任务不同)传递给gulp-rev-all模块的清单功能,如下所示

gulp.task('productionizeCss', function () {
  return gulp
    .src(['dist/prod/**/*.css'])
    .pipe(revAll.revision({
      fileNameManifest: 'css-manifest.json'
    }))
    .pipe(gulp.dest('dist/prod/'))
    .pipe(revAll.manifestFile())
    .pipe(gulp.dest('dist/prod/'));
}); 

gulp.task('productionizeJS', function () {
  return gulp
    .src(['dist/prod/**/*.js'])
    .pipe(revAll.revision({
      fileNameManifest: 'js-manifest.json'
    }))
    .pipe(gulp.dest('dist/prod/'))
    .pipe(revAll.manifestFile())
    .pipe(gulp.dest('dist/prod/'));
});

在这里,我有两个gulp任务,一个用于修改所有JS,另一个用于CSS.So,我创建了两个清单文件css-manifest.json,js-manifest.json。 然后我在rev-replace模块的src中指定了两个清单文件,如下所示:

gulp.task('revReplaceIndexHtml', function () {
  var manifest = gulp.src(["dist/prod/js-manifest.json", 'dist/prod/css-manifest.json']);
  return gulp.src('dist/dev/referralswebui/index.html')
    .pipe(revReplace({ manifest: manifest, replaceInExtensions: ['.html']}))
    .pipe(gulp.dest('dist/prod/referralswebui/'));
});