我有错误,但不知道为什么会这样。在下面的代码中我构建了css文件。任务"构建单一风格" (在runSequence中)构建临时的css文件。第二个任务将每个css文件与另外两个文件连接起来,并将它们写入更深层次的同一文件夹中,并放入" / concat"。
最后一个函数应该构建一个json文件
{
"base.css": "base-zt121112fd.css,
...
}
保存键值对,我可以将散列的css文件集成到不同的模板中。当所有css文件都写入" / concat" -folder时会被触发。
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));
}
当我跑步&#34; gulp build-styles&#34;第一次功能&#34; buildManifest&#34;触发正确,但没有写入,好像它没有找到src文件夹。如果我运行它两次就行了。编写了rev文件,因此写入了json文件。任何假设?
问候, 拉斯
编辑1:从函数中删除任务&#34; buildManifest&#34;并且在构建最终的css文件之后单独运行它也可以。但是在将任务放入序列时它无法正常工作。
编辑2:我试过了......在buildManifest函数中的其他内容:
var concatFiles = fs.readdirSync(paths.styles.destTemp + '/concat');
console.log(concatFiles);
现在我收到错误&#34; fs.readdirSync(paths.styles.destTemp +&#39; / concat&#39;);&#34;并说它如下:
错误:ENOENT,没有此类文件或目录&#39; ./ web / assets / css / temp / concat&#39;。
看起来就像我创建的文件夹,它在创建之后就没有被检测到。
答案 0 :(得分:0)
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
答案 1 :(得分:0)
在不生成单个流并将它们合并在一起的情况下,最后一个任务(构建清单)会提前触发。
所以我再次从清单中创建了一个自己的任务,创建单个流并合并它们。这样就行了。
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));
});