Gulp-rev:不是第一次工作,而是在第一次工作之后工作
Gulp-rev: isn't working at the first time, but after it
我遇到了错误,但不知道为什么会发生。在下面的代码中,我构建了 css 文件。任务"build-single-styles"(在runSequence中)构建临时css文件。第二个任务将每个 css 文件与另外两个文件连接起来,并将它们写入同一文件夹中更深一层的"/concat"。
最后一个函数应该构建一个 json 文件
{
"base.css": "base-zt121112fd.css,
...
}
它包含键值对,我可以将散列的 css 文件集成到不同的模板中。当所有 css 文件都写入"/concat"文件夹时,就会触发它。
var runSequence = require('run-sequence');
var concat = require('gulp-concat');
var rev = require('gulp-rev');
//run single tasks in a row
gulp.task('build-styles', function(){
runSequence('build-single-styles', 'concat-styles');
});
//build styles
gulp.task('build-single-styles', function() {
return gulp.src(allStyles)
.pipe($.plumber({ errorHandler: function (error) {}}))
.pipe($.rubySass({
style: sassStyle,
compass: true,
noCache: true
}))
.pipe(isProduction ? $.combineMediaQueries({ log: true }) : _.noop())
.pipe(isProduction ? $.minifyCss({ keepSpecialComments: 1 }) : _.noop())
.pipe($.plumber.stop())
.pipe(gulp.dest(paths.styles.destTemp))
.pipe($.size({
showFiles: true
}))
});
//concat each css with 2 others
gulp.task('concat-styles', function(){
var files = fs.readdirSync(paths.styles.destTemp);
var index = files.indexOf('slider.css');
if(index > -1) files.splice(index, 1);
var autosuggest = paths.styles.srcBase + '/autosuggest_inquisitor.css';
for(var i = 0; i < files.length; i++) {
gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, paths.styles.destTemp + '/slider.css'])
.pipe($.concat({path: files[i], cwd: ''}))
.pipe(gulp.dest(paths.styles.destTemp + '/concat'));
if(i == files.length - 1) buildManifest();
}
});
function buildManifest(){
gulp.src([paths.styles.destTemp + '/concat/*.css', !paths.styles.destTemp + '/concat/slider.css'])
.pipe(rev())
.pipe(gulp.dest(paths.styles.dest))
.pipe(rev.manifest({ base: styleLinkup, path: 'styles-linkup.json' }))
.pipe(gulp.dest(styleLinkup));
}
当我第一次运行"gulp build-styles"时,函数"buildManifest"触发正确,但没有写入任何内容,好像它没有找到src文件夹。如果我运行两次它,它可以工作。已修订的文件被写入,因此将写入 json 文件。有什么假设吗?
问候拉斯
编辑 1:从函数"buildManifest"中创建一个任务,并在构建最终的 css 文件后单独运行它也可以。但是在将任务放入序列中时它不起作用。
编辑 2:我在 buildManifest 函数中尝试了 sth. else:
var concatFiles = fs.readdirSync(paths.styles.destTemp + '/concat');
console.log(concatFiles);
现在我在"fs.readdirSync(paths.styles.destTemp + '/concat');"上收到一个错误,它说:
错误:ENOENT,没有这样的文件或目录"./web/assets/css/temp/concat"。
似乎我之前创建的文件夹在创建后没有立即检测到。
pipe
正在异步运行,因此在此块中,您对buildManifest
的调用将在concat
发生之前执行:
for(var i = 0; i < files.length; i++) {
gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, paths.styles.destTemp + '/slider.css'])
.pipe($.concat({path: files[i], cwd: ''}))
.pipe(gulp.dest(paths.styles.destTemp + '/concat'));
if(i == files.length) buildManifest();
尝试将buildManifest
作为自己的任务并将其添加到您的runSequence
如果不生成单个流并将它们全部合并在一起,最后一个任务(构建清单)会提前触发。
所以我再次从清单中创建了一个自己的任务,创建单个流并合并它们。这样它就起作用了。
var runSequence = require('run-sequence'),
concat = require('gulp-concat'),
rev = require('gulp-rev'),
merge = require('merge-stream');
gulp.task('build-styles', function(){
runSequence('build-single-styles', 'concat-styles', 'build-manifest');
});
gulp.task('build-single-styles', function() {
return gulp.src(allStyles)
.pipe($.plumber({ errorHandler: function (error) {}}))
.pipe($.rubySass({
style: sassStyle,
compass: true,
noCache: true
}))
.pipe(isProduction ? $.combineMediaQueries({ log: true }) : _.noop())
.pipe(isProduction ? $.minifyCss({ keepSpecialComments: 1 }) : _.noop())
.pipe($.plumber.stop())
.pipe(gulp.dest(paths.styles.destTemp))
.pipe($.size({
showFiles: true
}))
});
gulp.task('concat-styles', function(done){
var files = fs.readdirSync(paths.styles.destTemp),
index = files.indexOf('slider.css'),
autosuggest = paths.styles.srcBase + '/autosuggest_inquisitor.css',
slider = paths.styles.destTemp + '/slider.css',
streams = [];
if (index > -1) files.splice(index, 1);
for(var i = 0; i < files.length; i++) {
streams.push(gulp.src([paths.styles.destTemp + '/' + files[i], autosuggest, slider])
.pipe($.concat({path: files[i], cwd: ''}))
.pipe(gulp.dest(paths.styles.destTemp + '/concat')));
}
return merge(streams);
});
gulp.task('build-manifest', function() {
gulp.src([paths.styles.destTemp + '/concat/*.css', !paths.styles.destTemp + '/concat/slider.css'])
.pipe(rev())
.pipe(gulp.dest(paths.styles.dest))
.pipe(rev.manifest({ base: styleLinkup, path: 'styles-linkup.json' }))
.pipe(gulp.dest(styleLinkup));
});
- Javascript:JSON请求仅在第一次工作
- jQuery on()-不;第一次点击时无法工作
- 第一次点击动态创建的表后,点击不工作
- 让jqGrid第一次工作
- show-hide只在ajax调用中第一次工作
- twitter引导崩溃在第一次点击后停止工作
- $(this) .prop() 只在第一次工作
- 复选框选择/取消选择触发器第一次工作,但在随后的尝试中失败
- 光滑的滑块只在Jquery Mobile中第一次工作
- jQuery插件-仅在第一次加载时工作
- AngularJS控制器没有'第一次刷新页面后无法工作
- Kml层在刷新后工作正常,但给定typeError:无法读取属性getMap.第一次加载时
- 启动日期选择器beforeShowDay只有在第一次点击后才能工作
- ng-click在第一次点击后停止工作,但仅在以后的Angular版本中
- 为什么平滑滚动只有第一次才能工作
- 脚本仅在第一次源代码由 $ ajax 在 Firefox 中加载后工作
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- jsPDF 在第一次保存时工作,在第二次保存时不更新
- NG-CLICK功能仅在第一次工作
- 脚本只工作第一次,而不是在IE8刷新后