如何使用Gulp从SASS/SCSS文件中压缩和自动添加CSS前缀

Question

我在使用gulpfile时遇到了问题，无法弄清楚出了什么问题。

问题：autoprefixer没有像预期的那样工作，并且它并不总是按预期正确输出.css和.min.css文件。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var config = {
    sassMain: 'style/Main.scss',
    sassFiles: 'style/**/*.scss',
    cssfiles: ['style/Main.css'],
    dest: 'style',
    autoprefixerOptions: {
    browsers: ['last 2 versions', '> 5%']
    }
};

gulp.task('compile-sass', function () {
    return gulp.src(config.sassMain)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix(config.autoprefixerOptions.browsers))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
});

gulp.task('default', function () {
    gulp.watch(config.sassFiles, ['compile-sass']);
});

有什么想法吗？

- hi.im.kvothe

Answer 1

首先，我建议将所有源文件放入src文件夹中，将构建后的文件放入build文件夹中。 如下所示，您可以逐步添加新的管道以查看何时出现问题。

gulpfile.js

var gulp = require('gulp')
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer')
var minCss = require('gulp-minify-css')
var rename = require('gulp-rename')

var config = {
   srcCss : 'src/scss/**/*.scss',
   buildCss: 'build/css'
}

gulp.task('build-css', function(cb) {
   gulp.src(config.srcCss)

      // output non-minified CSS file
      .pipe(sass({
         outputStyle : 'expanded'
      }).on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest(config.buildCss))

      // output the minified version
      .pipe(minCss())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(config.buildCss))

   cb()
})

gulp.task('watch', function(cb) {
   gulp.watch(config.srcCss, ['build-css']) 
})

gulp.task('default', ['build-css', 'watch'])

主要的.scss文件

$degrees: '50%';

.rotated {
    transform: $degrees;
}

package.json

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.0"
  }
}

最终文件结构

运行$ gulp后，以下是您将拥有的文件结构（不包括node_modules文件夹）。

$ tree -I node_modules
.
├── build
│   └── css
│       ├── main.css
│       └── main.min.css
├── gulpfile.js
├── package.json
└── src
    └── scss
        └── main.scss

4 directories, 5 files

我的环境

$ node -v
v5.1.0

$ npm -v
3.3.12

$ gulp -v
[13:39:54] CLI version 1.0.0
[13:39:54] Local version 3.9.0

- AnthumChris

---

请尝试完全按照我编写和测试的代码来使用它。如果需要，逐步添加更多代码。 - anthumchris

rm -rf node_modules && npm install - anthumchris

这可能听起来很蠢，但我感到困惑，所以我要把自己放出来问一下：当我尝试删除node_modules时，我遇到了这个错误：Remove-Item：找不到与参数名'rf'匹配的参数。顺便说一句，谢谢大家的帮助。 - hi.im.kvothe

感谢所有的帮助。最终通过重新安装Node、NPM、node-sass和gulp，然后重建整个项目，成功解决了问题。 - hi.im.kvothe

这是在谷歌上的一个不错的发现。有一点需要注意 - gulp-minify-css 已经被弃用，并且至少引入了一个安全漏洞 (https://npmjs.com/advisories/785) 在本评论发布时。现在建议使用 gulp-clean-css。 - Luke A. Leber