如何从scss自动生成缩小的CSS？

I'm making edits to a project that uses scss. As I work locally the changes I make to the scss are reflected on my local server. However, there are minified css files that are part of the project and I feel like I should update those as well. Is there something I should be doing to generate those minified files as I go, or maybe an additional step I should take to regenerate those minified files?

我正在编辑一个使用scss的项目。当我在本地工作时,我对scss所做的更改会反映在我的本地服务器上。但是,有一些缩小的css文件是项目的一部分,我觉得我也应该更新它们。我应该做些什么来生成那些缩小的文件,或者我可能需要采取额外的步骤来重新生成那些缩小的文件?

1 个解决方案

#1

An automated task runner would be perfect for this, here's an example in Gulp.

一个自动化的任务运行器将是完美的,这是Gulp的一个例子。

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

In the root directory of your project, add a file named gulpfile.js, and place the following code into the file:

在项目的根目录中,添加名为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']);

In the terminal, run:

在终端中,运行:

$ gulp develop

and try to make changes to your scss files. They are now automatically compiled on every save!

并尝试更改您的scss文件。它们现在每次保存时自动编译!

#1