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 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']
}))