Lego2012
10/11/2016 - 8:28 PM

It’s good practice to organise CSS (and especially SCSS) files into modules. In CSS however, when @imports are used, it increases the number

It’s good practice to organise CSS (and especially SCSS) files into modules. In CSS however, when @imports are used, it increases the number of network requests and slows down page load times. Take a look at the next example:

gulp-css.js
content_copyfile_download
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    importCss = require('gulp-import-css'),
    autoprefixer = require('gulp-autoprefixer'),
    uncss = require('gulp-uncss'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    glob = require('glob');

gulp.task('css', ['jekyll'], function() {
  return gulp.src('css/style.scss')
    .pipe(sass())
    .pipe(importCss())
    .pipe(autoprefixer())
    .pipe(uncss({
      html: glob.sync("_site/**/*.html"),
      ignore: [
        'label.active', 
        '.dark-mode', 
        'span.tweet-time',
        /(#|\.)(is-)/,
        /(#|\.)(has-)/,
        /(#|\.)(js-)/           
      ]
      }))
      .pipe(minifyCss({keepBreaks:false}))
      .pipe(rename('style.min.css'))
      .pipe(gulp.dest('_site/style/'));
});