Gulp plugin which splits CSS files suitably for Internet Explorer < 10
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitattributes
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
appveyor.yml
gulpfile.js
index.js
package.json

README.md

gulp-bless

NPM version Build Status Windows Build Status Dependency Status


Gulp plugin which splits CSS files suitably for Internet Explorer < 10.

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