Using Gulp to Compile Sass and minify vendor css
css, gulp, sass
Solution
gulp-sass will meet your request. Pls let me show you how to compile Sass files and minify (or compress) compiled css files:
- install gulp-sass from here
- in you project's gulpfile.js, add following code:
Note: outputStyle in gulp-sass has four options: `nested`, `expanded`, `compact`, `compressed`
It really works, I have used it in my project.
var gulp = require('gulp');
var sass = require('gulp-sass');
//sass
gulp.task('sass', function () {
gulp.src(['yourCSSFolder/*.scss', 'yourCSSFolder/**/*.scss'])
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('yourCSSFolder/'));
});
// Default task
gulp.task('default', function () {
gulp.start('sass');
});
For reminder the readme
Problem
Getting to grips with Gulp and have a question. So I have a gulp CSS task like the below which works just fine: ``` var sassDir = 'app/scss'; var targetCssDir = 'public/assets'; gulp.task('css', function(){ return gulp.src(sassDir + '/main.scss') .pipe(sass({ style: 'compressed' }).on('error', gutil.log)) .pipe(autoprefix('last 10 version')) .pipe(gulp.dest(targetCssDir));; }); ``` But is there a way to add my vendor files like Bootstrap so it will be included for minification and concatenation. Hope you can advise.!