CODEWITHSUNDEEP
csssassgulpgulp-sass
Wesley Picotte
Wesley Picotte

Reputation: 47

Gulpfile Critical CSS Solution

I'm developing locally using Gulp and SASS to compile CSS for a dynamic site (i.e. CMS-driven). I'm trying to configure a solution to compile global vs. critical path CSS. The best idea so far is to split my main scss file into site template-specific files (e.g. templateA.scss, templateB.scss, etc.) Then, I can output and minify discrete CSS that is pulled into the site, template by template.

My question is about how to optimally configure gulpfile.js to faciliate this. I have a task set up for "template A" (which is actually the site's homepage). I have 4-5 additional templates that will utilize critical CSS, and would love feedback on how best to add these.

Here's the aforementioned task that deals with the homepage SCSS:

gulp.task('home', function() {
return gulp.src([
    'scss/home.scss'
    ])
    .pipe(sass({
        includePaths: [
            paths.bower + '/foundation-sites/scss'
        ]
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'ie >=9']
    }))
    .pipe(concat('home.css'))
    .pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'))
    .pipe(sync.stream());
 });

And the sass task, which as you can see deals with two scss files -- one for 'global css' and the other for 'home css'.

gulp.task('sass', function() {
return gulp.src('scss/app.scss')
.pipe($.sass({
  includePaths: sassPaths,
  outputStyle: 'expanded'
})
  .on('error', $.sass.logError))
.pipe($.autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('styles.dev.css'))
.pipe(gulp.dest('assets/styles'));

return gulp.src('scss/home.scss')
.pipe($.sass({
  includePaths: sassPaths
})
  .on('error', $.sass.logError))
.pipe($.autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'));
});

Do I need to create a separate task to pipe (and watch) each scss file?

If needed, here's the gulpfile in its entirety:

    var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var sync = require('browser-sync').create(); // create a browser sync instance.

var paths = {
    'bower': 'bower_components',
    'assets': 'assets'
};

var mypath = {
    'mycss': 'css'
};

gulp.task('styles', function() {
    return gulp.src([
        'scss/app.scss'
        ])
        .pipe(sass({
            includePaths: [
                paths.bower + '/foundation-sites/scss'
            ]
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >=9']
        }))
        .pipe(concat('styles.dev.css'))
        .pipe(gulp.dest(paths.assets + '/styles'));
});

gulp.task('home', function() {
    return gulp.src([
        'scss/home.scss'
        ])
        .pipe(sass({
            includePaths: [
                paths.bower + '/foundation-sites/scss'
            ]
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >=9']
        }))
        .pipe(concat('home.css'))
        .pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('assets/styles/crpath-css'))
        .pipe(sync.stream());
});

gulp.task('sass', function() {
    return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'expanded'
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(concat('styles.dev.css'))
    .pipe(gulp.dest('assets/styles'));

    return gulp.src('scss/home.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(concat('home.css'))
    .pipe(gulp.dest('assets/styles/crpath-css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'));
    });

gulp.task('minify-css', function() {
  return gulp.src('assets/styles/crpath-css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'));
});

gulp.task('watch', function() {

  sync.init({
    injectChanges: true,
    proxy: 'localhost/wesleypicotte'
  });

  gulp.watch('scss/**/*.scss', ['styles']);
  gulp.watch('scss/**/*.scss', ['home']);
  gulp.watch('scss/**/*.scss').on('change', sync.reload);
});

gulp.task('default', ['styles', 'home', 'minify-css']);

Upvotes: 0

Views: 971

Answers (1)

JustH
JustH

Reputation: 1402

You can use Globs in your src declaration return gulp.src('./**/*.scss', '!**/_*.scss') and it should grab every file that doesn't isn't prefixed with _. ie home.scss and main.scss will be compiled to home.css and main.css but _buttons.scss will only be complied if included in another file. All files will be output to the same directory, so if you want them to end up in a different structure you may want to look at https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

Upvotes: 1

Related Questions