Gulp + Sass + 合并媒体查询 + Sourcemaps + Minify

Question

我正在尝试使上述组合正常工作，但无法正常工作。我尝试了以下组合：

1)

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

gulp.task('sass',function () {
    gulp.src('_scss/main.scss')
        .pipe(sass({
            loadPath: ['_scss'],
            style: "compressed",
            trace: true,
            sourcemap: true,
            sourcemapPath: "../../../_scss",
            noCache: true,
            require: ['sass-media_query_combiner']
    }))

2)

var sass = require('gulp-ruby-sass');
var cmq = require('gulp-combine-media-queries');
var cssmin = require('gulp-cssmin');

gulp.task('sass',function () {
    gulp.src('_scss/main.scss')
        .pipe(sass({
            loadPath: ['_scss'],
            style: "nested",
            trace: true,
            sourcemap: true,
            sourcemapPath: "../../../_scss",
            noCache: true
    }))
    .pipe(cmq())
    .pipe(cssmin())

3) 我也尝试过使用 gulp-sass + gulp-combine-media-queries + gulp-minify-css + gulp-sourcemaps

在迁移到 Gulp 之前，我在 ST2 中使用了这个构建命令：

"cmd": ["sass", "--update", "${project_path}/web/_scss/main.scss:${project_path}/web/resources/css/main.css", "--stop-on-error", "--no-cache", "--style", "compressed","-r","sass-media_query_combiner"],

reddit、sass-media_query_combiner 和 gulp-ruby-sass 上的问题链接

Answer 1

“.pipe(cmq())”应该在“.pipe(gulp.dest())”之前

gulp.task('sass', function() {
return gulp.src("./*.scss")
    .pipe(sass())
    .pipe(cmq())
    .pipe(gulp.dest(".css/"))
    .pipe(reload({stream: true}))

});