Question

结合这两个任务的最佳方法是什么？如果可能的话。

我认为继续使用这种方法会很麻烦并且很难，所以有没有更聪明的方式来运行这些任务？

请在下面查看我当前的两个任务的代码。您应该能够看到我的输入文件和所需的输出文件夹。我当前有两个单独的任务的原因是因为还有其他我不想编译的文件夹/文件（请参见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

查看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());
});

Answer 2

尝试使用此代码：

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();
});

如何结合这两个任务

2 个答案: