Gulp-compass 压缩 sass 不起作用

Question

运行 Sass 3.4.3、Compass 1.0.1、Gulp 3.8.8 和 Gulp-compass 1.3.1

gulp.task('compass', function() {
    gulp.src('comp/sass/style.scss')
        .pipe(compass({
            sass: 'comp/sass',
            image: 'dev/theme/images',
            style: 'compressed'
        })
        .on('error', gutil.log))
        .pipe(gulp.dest('dev/theme/css'))
});

Compass 任务正在编译 sass，但压缩不起作用。它输出一个普通的未压缩的 CSS 文件。

Answer 1

您所拥有的应该可以工作，但我认为 gulp-compass 插件的配置属性有点错误。在单独的 config.rb 文件中输出样式对我来说始终有效。

var gulp = require('gulp');
var compass = require('gulp-compass');
var gutil = require('gulp-util');

gulp.task('compass', function() {
    return gulp.src('comp/sass/style.scss')
        .pipe(compass({
            config_file: 'config.rb',
            sass: 'comp/sass',
            image: 'dev/theme/images'
        })
        .on('error', gutil.log))
        .pipe(gulp.dest('dev/theme/css'))
    ;
})

在 config.rb 文件中有这个：

output_style = :compressed

Answer 2

我遇到了同样的问题：

gulp.task('compass', function() {
    gulp.src(sassSources)
     .pipe(compass({
        sass: 'components/sass',
        image: outputDir + '/images',
        style: sassStyle
     }))
     .on('error', gutil.log)
     .pipe(gulp.dest(outputDir + '/css'))
     .pipe(connect.reload())
});

请注意，在代码的下一部分中，有条件地定义了这个变量 sassStyle，其中 node.js process.env 进程正在“监视” NODE_ENV 值，因此我们可以在生产文件夹和开发文件夹之间切换：

env = process.env.NODE_ENV || 'development';
 if (env ==='development') {
    outputDir = 'builds/development/';
    sassStyle = 'expanded';
} else {
    outputDir = 'builds/production/';
    sassStyle ='compressed';
}

它没有解决问题，而是手动编辑了一个外部 config.rb 文件：

config_file: 'config.rb',

文件中的这一行有效：

output_style = :compressed

目前，我只是在文件中将这些行注释掉作为解决方法。

我正在使用以下 devDependencies：

  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-coffee": "^2.3.2",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.0.0",
    "gulp-util": "^3.0.7",
    "jquery": "^3.1.0",
    "mustache": "^2.2.1"
  }