gulp-bless-improved-cachebusting

CSS post-processor which splits CSS files suitably for Internet Explorer < 10. Bless + Gulp = gulp-bless. In this version, cachebusting is using a sha1 hash so no unnecessary busting is happening.

Usage no npm install needed!

<script type="module">
  import gulpBlessImprovedCachebusting from 'https://cdn.skypack.dev/gulp-bless-improved-cachebusting';
</script>

README

gulp-bless

NPM version Build Status Windows Build Status Dependency Status

Gulp plugin which splits CSS files suitably for Internet Explorer < 10. In this version, cachebusting is using a sha1 hash so no unnecessary busting is happening.

This is the a Gulp wrapper around bless.js (see blesscss.com).

Installation

npm install gulp-bless

Usage

var gulp = require('gulp');
var bless = require('gulp-bless');

gulp.task('css', function() {
    gulp.src('style.css')
        .pipe(bless())
        .pipe(gulp.dest('./splitCSS'));
});

gulp.task('default', ['watch']);

// Rerun the task when a file changes
gulp.task('watch', function () {
  gulp.watch('./css/*.css', ['css']);
});

bless(options).

  • imports - A boolean (which defaults to true). Determines whether or not the first chunk / "blessed" file @imports the others.
  • cacheBuster - A boolean (which defaults to true). If imports is true, this will add a random query parameter value to prevent against aggressive caching.
  • log - A boolean (which defaults to false). Logs a small bit of information about the process.
  • suffix - Either a string or a function (which defaults to "-blessed").
    • If it is a string then it will be appended to the original file name before the index. E.g.
        //Assume you have long.css that is to be splitted into 3 parts, following code will 
    //produce 3 files: long.css, long-part1.css, long-part2.css    
    gulp.src('long.css')
        .pipe(bless{
            suffix: '-part'
        })
        .pipe(gulp.dest('./'));
    • If it is a function then whatever returned by the function is appended to the original file name. The function takes in a 1-based index E.g.
        //Assume you have long.css that is to be splitted into 3 parts, following code will 
    //produce 3 files: long.css, long-functionpart1.css, long-functionpart2.css
    gulp.src('long.css')
        .pipe(bless{
            suffix: function(index) {
                return "-functionpart" + index;
            }
        })
        .pipe(gulp.dest('./'));

Example:

gulp.src('long.css')
        .pipe(bless({
            imports: false
        }))
        .pipe(gulp.dest('./'))

About minification

You should minify your CSS after it goes through gulp-bless. See BlessCSS/bless#90 as to why.

Does this support sourcemaps?

Yes. This can be used with gulp-sourcemaps.

Team