如何从 scss 自动生成缩小的 css?
How can I automatically generate minified css from scss?
我正在编辑一个使用 scss 的项目。当我在本地工作时,我对 scss 所做的更改会反映在我的本地服务器上。但是,项目中有一些缩小的 css 文件,我觉得我也应该更新这些文件。我应该做些什么来生成这些缩小的文件,或者我应该采取额外的步骤来重新生成这些缩小的文件?
自动化任务 运行ner 将是完美的选择,这是 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 文件。它们现在会在每次保存时自动编译!
我正在编辑一个使用 scss 的项目。当我在本地工作时,我对 scss 所做的更改会反映在我的本地服务器上。但是,项目中有一些缩小的 css 文件,我觉得我也应该更新这些文件。我应该做些什么来生成这些缩小的文件,或者我应该采取额外的步骤来重新生成这些缩小的文件?
自动化任务 运行ner 将是完美的选择,这是 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 文件。它们现在会在每次保存时自动编译!