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

const addsrc = require('gulp-add-src');
const ignore = require('gulp-ignore');
...
gulp.task('generate-css', () =>
   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())
   );

这种方法使任务更具凝聚力，但如果有疑问则需要执行单独的任务。

Gulp改变src

2 个答案: