我该如何从scss自动生成压缩后的css文件？

Question

我正在编辑一个使用scss的项目。在本地工作时，对scss的更改会反映在我的本地服务器上。但是，该项目包含压缩的css文件，我觉得我也应该更新它们。我是否应该采取一些措施使这些压缩文件随着我的操作而生成，或者采取其他步骤重新生成这些压缩文件呢？

- pixelfairy

---

注意：我正在编辑的文件以.css.scss结尾。 - pixelfairy

你可以使用gruntjs来完成这个任务。http://gruntjs.com/ - user3148949

Answer 1

一个自动化任务运行器对此来说是完美的，下面是在 Gulp 中的示例。

$ npm install -g gulp && npm install gulp gulp-sass

在您的项目根目录下添加一个名为gulpfile.js的文件，并将以下代码放入该文件中：

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

// Compile all the .scss files from
// ./scss to ./css
gulp.task('scss', function () {
  gulp.src('./scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});

// Watches for file changes
gulp.task('watch', function(){
  gulp.watch('./scss/**/*.scss', ['scss']);
});

gulp.task('develop', ['scss', 'watch']);

在终端中运行以下命令：

$ gulp develop

尝试对你的scss文件进行更改。现在它们会在每次保存时自动编译！

- Ben

---

谢谢！我现在意识到只有引导文件被压缩了，而其他文件没有被压缩，这对我来说很方便...但是这很令人困惑，所以应该以某种方式更清晰地表达。 - pixelfairy

我暂时还没有编辑bootstrap文件...所以，我要着手处理下一个任务，即编辑haml文件。我不确定自己是否是StackOverflow的不良公民，但我会将其标记为已回答，而不实际测试它。感谢您的回答。我一定会在未来的项目中使用它。 - pixelfairy

哦，有趣哈哈哈，如果需要更多帮助或澄清，请告诉我！ - Ben

如果您感兴趣，代码库在github.com/city72/city-72。 - pixelfairy