Using Gulp to Compile Sass and minify vendor css

Question

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 targetCss         


        

Answer 1

I can think of two solutions. The best option, I feel, is to use @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. Apparently this doesn't work using SASS unless you are using SASS imports.

---

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.