css - Gulp-compass 压缩 sass 不工作

标签 css sass gulp compass-sass

运行 Sass 3.4.3Compass 1.0.1Gulp 3.8.8Gulp-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 文件。

最佳答案

我遇到了同样的问题:

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"
  }

关于css - Gulp-compass 压缩 sass 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25808128/

相关文章:

node.js - 更好的方法将 scss 变量传播到每个 scss 文件

javascript - 如何使用具有多个入口点的 Webpack 和 Gulp 来转换应用程序和测试目录?

css - 标题和 float 问题

css - 具有延迟的纯 CSS 动画可见性

javascript - 为什么 :style on re-frame sometimes used with brackets, 带有大括号,但没有任何内容?

html - 如何将最大高度设置为 CSS 网格

variables - 在 Sass 中动态创建或引用变量

javascript - CSS无限动画

javascript - gulp-watch 和 LiveReload,重新加载太早

javascript - 使用 gulp concat for css 我如何将 main.css 连接到我所有其他的 css