Using Gulp to Compile SASS and Minify Vendor CSS

How to gulp and concatenate bower css files

You need to change the components that work together. Use 'main-bower-files' instead of 'gulp-main-bower-files' and exchange 'gulp-concat' with 'gulp-group-concat' to combine as shown below.

I left the double filter in order to get a nicer debug output.

 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    groupConcat = require('gulp-group-concat'),
    concat = require('gulp-concat'),
    debug = require('gulp-debug'),
    bowerMain = require('main-bower-files'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    flatten = require('gulp-flatten'),
    autoprefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    gutil = require('gulp-util'),
    del = require('del');

/**
 * concatVendorCSS
 * Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
 * no autoprefixing included: should be done by source package
 * scss-Files will be ignored - include them in /assets/styles/main.scss
 */
gulp.task('styles:vendor',['clean:vendor:styles'], function(){
    console.log('concatenating bower vendor css files into vendor.min.css and moving to ' + sassConfig.outputDirectory + '...');

  return gulp.src(bowerMain())
    .pipe( filter(filters.css) )
    .pipe( debug() )
    .pipe( sourcemaps.init() )
    .pipe( groupConcat( { 'vendor.min.css': filters.css } ) )
    .pipe( autoprefix(apConfig) )
    .pipe( minify() )
    .pipe( sourcemaps.write('./maps') )
    .pipe( gulp.dest('dist/styles/') );
});

gulp-sass @import CSS file

Passing some parameters to minifyCSS allows me to achieve this.

.pipe(minifyCSS({
        relativeTo: './bower_components',
        processImport: true
    }))

Sources:
gulp-minify-css depends on clean-css, referenced options explained here.

Gulp task: pipe gulp-sass to postCSS doing nothing

This

  .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

should be:

    .pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

A few details:

• If Config file is there, remove the options from postcss({...})
• It runs faster without postcss-scss on the function argument (but it has to be imported), like so:

const postcssScss = require('postcss-scss') //keep this

.pipe(postcss([autoprefixer()])) //removed here
   

---

You can add cssnano and remove outputStyle:compressed but this will be slower (loading an extra package).

---

Related Topics