My current gulp task is setup to compile & minify scss in a source directory to a public directory. I'd like the task to also pull styles from dependency plugins like jquery, lightbox, carousel, etc.
Current gulp looks something like this:
var config = {
"sourceNodeLib": "./node_modules",
paths: {
source: {
styles: './source/styles/**/*.scss'
},
dist: {
styles: './public/styles'
},
patternLibrary: {
styles: './pattern-library/assets/css'
}
},
plugins: {
"flexboxgrid": ["${sourceNodeLib}/flexboxgrid/src/css/flexboxgrid.css"]
}
};
gulp.task('styles', function () {
return gulp
.src(config.paths.source.styles)
.pipe(sourcemaps.init()) // Start source maps
.pipe(sassGlob())
.pipe(sass({outputStyle: 'compressed'}).on('error', onError))
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false,
// flexbox: 'no-2009'
}))
.pipe(rename({ suffix: ".min" })) // Rename with '.min'
.pipe(sourcemaps.write('/')) // Finish source maps
.pipe(gulp.dest(config.paths.dist.styles)) // Add copy to public directory
.pipe(gulp.dest(config.paths.patternLibrary.styles)) // Add copy to the pattern library
.pipe(reload({ stream: true }))
;
});