Using Gulp to Compile Sass and minify vendor css
Solution 1
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. Hope it helps.
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
Solution 2
I can think of two solutions. The best option, I feel, is to use Apparently this doesn't work using SASS unless you are using SASS imports.@import
statements within your Sass file to include the vendor files. Use relative paths to where they live, and you can then include them in the order you want.
Alternatively, you can use event-stream
and gulp-concat
to concatenate streams of files. In this case, you should not use gulp-sass
to compress the files, rather, use something like gulp-csso
to handle the compression.
var es = require('event-stream'),
concat = require('gulp-concat');
gulp.task('css', function(){
var vendorFiles = gulp.src('/glob/for/vendor/files');
var appFiles = gulp.src(sassDir + '/main.scss')
.pipe(sass({ style: 'compressed' }).on('error', gutil.log));
return es.concat(vendorFiles, appFiles)
.pipe(concat('output-file-name.css'))
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(targetCssDir));
});
Again, you should use the first method if you can, but es.concat
is useful for other scenarios.
Solution 3
i found this recently gulp-cssjoin this allows you to replace imports with inline css
the scss
@import '../../bower_components/angular/angular-csp.css';
the gulp task
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-ruby-sass'),
cssjoin = require('gulp-cssjoin'),
csscomb = require('gulp-csscomb');
gulp.task('sass',['images'], function() {
return gulp.src('src/sass/*.{sass,scss}')
.pipe(sass({
compass: true,
bundleExec: true,
sourcemap: true,
sourcemapPath: '../src/sass'
}))
.on('error',gutil.log.bind(gutil, 'Sass Error'))
.pipe(cssjoin({
paths: ['./src/sass']
}))
.pipe(csscomb())
.pipe(gulp.dest('build'));
});
the important part is the passing in of the paths
.pipe(cssjoin({
paths: ['./src/sass']
}))
Lee
Updated on June 30, 2020Comments
-
Lee almost 4 years
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.!
-
cimmanon about 10 yearsI find it unlikely that the vendor files the OP wants to include for minification purposes are Sass files, otherwise they probably would have included it as you suggest. Sass cannot import CSS files in the same way that it does with Sass files (see: stackoverflow.com/questions/16947337/…).
-
Lee about 10 yearsThanks OverZealous. Using @import just echo's out import in the css file so thats no good. the only thing I don't like having to src of files is the order in which they load. Of course I could prefix them ie 01_bootstrap.css.
-
OverZealous about 10 yearsThat's too bad, Less had an alternative term (
include
) which can include any file. The second solution could still help. You can specify multiplesrc
files using an array to control the order. -
Lee about 10 yearsI cant get this to work OverZealous. It just creates separate files in the destination directory. the concat is not doing anything:-(
-
OverZealous about 10 yearsI'm an idiot, and forgot to include
gulp-concat
, I've updated the solution. I apologize! -
jlee over 9 years@cimmanon, @OverZealous - since CSS is valid SCSS, another quick and dirty solution to OP is to rename the CSS --> SCSS, and use
@import
like you originally suggested. -
zok over 9 yearsGulp always place appFiles code before vendorFiles code in the target output-file (maybe because their stream runs faster, in my case?). How to solve that? I'm using
mainBowerFiles()
withgulpFilter
as the vendorFiles source.