Gulp change src

Question

У меня есть эта задача. Сначала я делаю одно с одним src. Затем я делаю другое дело с другим src. Как «объединить» их в один конвейер?

gulp.task('css', function() { 
    gulp.src('site/patterns/site/site.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer()) 
     .pipe(rename('index.css')) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(minifyCss()) 
     .pipe(rev()) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(rev.manifest()) 
     .pipe(revDel({ dest: 'assets/css' })) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(notify("CSS generated!")) 
    ; 
    gulp.src(['assets/css/index-*.css'], {read: false}) 
     .pipe(revOutdated()) // leave 2 recent assets (default value) 
     .pipe(cleaner()); 
}); 

Answer 1

Вы не объединяете их и не превращаете их в один конвейер. Здесь у вас две зависимые задачи. Вы должны относиться к ним как таковым.

Вы хотите, чтобы ваш второй конвейер запускался только после того, как первый закончен, так что все ваши файлы .css были сгенерированы в assests/css. Таким образом, вы положили каждый трубопровод в отдельную задачу и сделать второе зависеть от первого:

gulp.task('generate-css', function() { 
    return gulp.src('site/patterns/site/site.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer()) 
    .pipe(rename('index.css')) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(minifyCss()) 
    .pipe(rev()) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(rev.manifest()) 
    .pipe(revDel({ dest: 'assets/css' })) 
    .pipe(gulp.dest('assets/css')) 
    .pipe(notify("CSS generated!")); 
}); 

gulp.task('css', ['generate-css'], function() { 
    return gulp.src(['assets/css/index-*.css'], {read: false}) 
    .pipe(revOutdated()) // leave 2 recent assets (default value) 
    .pipe(cleaner()); 
}); 

Answer 2

Это правда, что отдельные задачи не должны быть объединены или превращены в единый трубопровод, но подъемная каждую маленький микро подзадачи в отдельный задача просто убедиться, что она выполняется в правильном порядке, может быстро раздуть ваш gulpfile.js. В сложных средах сборки легко справиться с таким количеством задач и зависимостей, что никто не может понять, что происходит.

Для выполнения подзадачи последовательно в конце задачи, использовать gulp-ignore, чтобы убрать src виниловый поток с последующим gulp-add-src эффективно создать новый поток.

package.json

"devDependencies": { 
    "gulp-add-src": "~0.2", 
    "gulp-ignore": "~2.0", 

gulpfile.js

var addsrc = require('gulp-add-src'); 
var ignore = require('gulp-ignore'); 
... 
gulp.task('generate-css', function() { 
    return gulp.src('site/patterns/site/site.scss') 
     .pipe(sass().on('error', sass.logError)) 
     ... 
     .pipe(ignore.exclude(true)) //clear out src vinyl stream 
     .pipe(addsrc.prepend('assets/css/index-*.css')) //new stream 
     .pipe(revOutdated()) 
     .pipe(cleaner()); 
    }); 

Такой подход делает задачу более сплоченной, но если вы сомневаетесь идти с отдельными задачами.