How can I automatically generate css minified code from scss?
I am editing a project that uses scss. When I work locally, the changes I make to scss are reflected in my local server. However, there are mini css files that are part of the project and I feel I should update them as well. Is there something I should be doing to generate these minifiles as I go, or maybe an additional step I should take to recover these minifiles?
+3
source to share
1 answer
A task automation would be perfect for that, here's an example in Gulp .
$ npm install -g gulp && npm install gulp gulp-sass
In the root directory of your project, add a file named gulpfile.js
and put the following code in the file:
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 a terminal, run:
$ gulp develop
and try to make changes to your scss files. They will now automatically compile on every save!
+2
source to share