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

0pizxfdo  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(206)

我有这个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);
}));
uajslkp6

uajslkp61#

你有没有试过在一个目标中的管道之前放一个concat?你需要导入concat函数找到here。下面的代码应该可以合并你的文件。

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

相关问题