使用 gulp 将所有 scss 文件合并为一个 css 文件

Question

我有这个 gulpfile.js 文件。

在这里，您可以看到每个.scss文件都转换为相应的.css文件，但我希望所有.scss文件都将转换为仅一个.css文件，即 main.css。我怎样才能做到这一点？

var gulp = require('gulp');

var sass = require('gulp-sass');

var browserSync = require('browser-sync').create();

gulp.task('sass', function() {

    return gulp.src('app/scss/**/*.scss')

        .pipe(sass())

        .pipe(gulp.dest('app/css'))

        .pipe(browserSync.reload({

            stream: true

        }))

});

gulp.task('browserSync', function(done) {

    browserSync.init({

        server: {

            baseDir: 'app'

        },

    });

    done();

})

gulp.task('watch', gulp.series('browserSync', 'sass', function() {

    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));

    gulp.watch("app/*.html", { events: 'all' }, function(cb) {

        browserSync.reload();

        cb();

    });

    gulp.watch('app/js/**/*.js', browserSync.reload);

}));

Answer 1

您是否尝试过在目的地的管道之前放入 concat ？您需要导入此处找到的 concat 函数。以下内容应合并您的文件。gulp.task('sass', function() {    return gulp.src('app/scss/**/*.scss')        .pipe(sass())        // concat will combine all files declared in your "src"        .pipe(concat('all.scss'))        .pipe(gulp.dest('app/css'))        .pipe(browserSync.reload({            stream: true        }))    });