如何结合这两个gulp任务？

Question

梳理这两项任务的最佳方法是什么？如果它是可能的。

我认为这种方法会变得混乱和难以维持，那么有更聪明的方法来运行这些任务吗？

请参阅我目前的两个gulp任务的代码。您应该能够看到我的输入文件和所需的输出文件夹。我目前有两个单独的任务的原因是因为还有其他我不想编译的文件夹/文件（请参阅includePaths）。

// A task that compiles index SCSS to CSS
gulp.task('sass-index', function () {
    return gulp.src('resources/scss/index.scss')
        .pipe(sass({
            precision: 10,
            includePaths: [
                'resources/scss/variables',
                'resources/scss/mixins'
            ]
        }))
        .pipe(autoprefixer({
            browsers: [
                '> 1%',
                'last 2 Chrome major versions',
                'last 2 Firefox major versions',
                'last 2 Edge major versions',
                'last 2 Safari major versions',
                'ie 11',
                'last 3 Android major versions',
                'last 3 ChromeAndroid major versions',
                'last 2 iOS major versions'
            ]
        }))
        .pipe(uglifycss())
        .pipe(gulp.dest('assets/css'))
        .pipe(browserSync.stream());
});

// A task that compiles template SCSS to CSS
gulp.task('sass-templates', function () {
    return gulp.src('resources/scss/templates/*.scss')
        .pipe(sass({
            precision: 10,
            includePaths: [
                'resources/scss/variables',
                'resources/scss/mixins'
            ]
        }))
        .pipe(autoprefixer({
            browsers: [
                '> 1%',
                'last 2 Chrome major versions',
                'last 2 Firefox major versions',
                'last 2 Edge major versions',
                'last 2 Safari major versions',
                'ie 11',
                'last 3 Android major versions',
                'last 3 ChromeAndroid major versions',
                'last 2 iOS major versions'
            ]
        }))
        .pipe(uglifycss())
        .pipe(gulp.dest('assets/css/templates'))
        .pipe(browserSync.stream());
});

Answer 1

试试这段代码：

const gulpSrc = "resources/scss/",
  gulpDest = "assets/css/",
  filePaths = [
    [
        gulpSrc + "index.scss", 
        gulpDest
    ],
    [
        gulpSrc + "templates/*.scss", 
        gulpDest, gulpDest + "/templates"
    ]
  ]
  ;

gulp.task('sass', function (done) {
    filePaths.map(function (file) {
        return gulp.src(file[0])
            .pipe(sass({
                precision: 10,
                includePaths: [
                    'resources/scss/variables',
                    'resources/scss/mixins'
                ]
            }))
            .pipe(autoprefixer({
                browsers: [
                    '> 1%',
                    'last 2 Chrome major versions',
                    'last 2 Firefox major versions',
                    'last 2 Edge major versions',
                    'last 2 Safari major versions',
                    'ie 11',
                    'last 3 Android major versions',
                    'last 3 ChromeAndroid major versions',
                    'last 2 iOS major versions'
                ]
            }))
            .pipe(uglifycss())
            .pipe(gulp.dest(file[1]))
            .pipe(browserSync.stream());
    });
    done();
});

Answer 2

看看lazypipe。有了它，您可以创建gulp任务的可重用部分。

未经测试：

var sassTasks = lazypipe()
 .pipe(sass({
            precision: 10,
            includePaths: [
                'resources/scss/variables',
                'resources/scss/mixins'
            ]
        }))
        .pipe(autoprefixer({
            browsers: [
                '> 1%',
                'last 2 Chrome major versions',
                'last 2 Firefox major versions',
                'last 2 Edge major versions',
                'last 2 Safari major versions',
                'ie 11',
                'last 3 Android major versions',
                'last 3 ChromeAndroid major versions',
                'last 2 iOS major versions'
            ]
        }))
        .pipe(uglifycss());


gulp.task('sass-index', function () {
  return gulp.src('resources/scss/index.scss')
    .pipe(sassTasks())
    .pipe(gulp.dest('assets/css'))
    .pipe(browserSync.stream());
});

gulp.task('sass-templates', function () {
   return gulp.src('resources/scss/templates/*.scss')
     .pipe(sassTasks())
     .pipe(gulp.dest('assets/css/templates'))
     .pipe(browserSync.stream());
});