如何在 Gulp 任务中为多个管道制作立面

Question

我的 gulpfile.js 中有以下任务：

gulp.task('css', function() {
  return gulp.src('theme.scss')
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(gulp.dest('dist'));
});

我想将所有这些管道移动到一个模块以获得类似的东西：

gulp.task('css', function() {
  return gulp.src('theme.scss')
    .pipe(theme())
    .pipe(gulp.dest('dist'));
});

可能吗？

Answer 1

我想象的最简单的方法是这样的：

function theme(stream) {
    return stream.pipe(less())
        .pipe(minify())
        .pipe(prefix())
}

gulp.task('less', function() {
    return theme(gulp.src('theme.less'))
        .pipe(gulp.dest('public'));
})

（用 LESS 完成，b/c gulp-ruby-sass 现在有了一些新界面）。如果你想灵活一点，你可以在 theme-function 中任意管道：

function theme(stream) {
    return stream.pipe(minify())
        .pipe(prefix())
}

gulp.task('less', function() {
    return theme(gulp.src('theme.less').pipe(less()))
        .pipe(gulp.dest('public'));
})

它可能没有你想要的那么漂亮，但它没有太多额外的包裹就完成了交易。

Answer 2

我是用lazypipe做的，我的独立模块是这样实现的：

module.exports = function () {
  var pipes = lazypipe()
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...)
    .pipe(...);

  return pipes();
};

如何在 Gulp 任务中为多个管道制作立面

How to make facade for several pipes in Gulp task

javascript

node.js

gulp