CSS post-processor which splits CSS files suitably for Internet Explorer < 10. Bless + Gulp = gulp-bless.
npm install gulp-blessgulp-bless
==========
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Windows Build Status][appveyor-image]][appveyor-url] [![Dependency Status][depstat-image]][depstat-url]
---
Gulp plugin which splits CSS files suitably for Internet Explorer < 10.
This is the a Gulp wrapper around bless.js (see blesscss.com).
``js`
npm install gulp-bless
`js
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']);
});
`
- 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.
javascript
//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.
javascript`
//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:
`javascript``
gulp.src('long.css')
.pipe(bless({
imports: false
}))
.pipe(gulp.dest('./'))
You should minify your CSS after it goes through gulp-bless. See BlessCSS/bless#90 as to why.
Yes. This can be used with gulp-sourcemaps.
- Adam Lynch (@adam-lynch) (Creator)
- Alvin Lin (@alvinlin123)
[npm-url]: https://npmjs.org/package/gulp-bless
[npm-image]: http://img.shields.io/npm/v/gulp-bless.svg?style=flat
[travis-url]: http://travis-ci.org/BlessCSS/gulp-bless
[travis-image]: http://img.shields.io/travis/BlessCSS/gulp-bless.svg?style=flat
[appveyor-url]: https://ci.appveyor.com/project/BlessCSS/gulp-bless/branch/master
[appveyor-image]: https://ci.appveyor.com/api/projects/status/9hv1ts9fm2g8d6rj/branch/master?svg=true
[depstat-url]: https://david-dm.org/BlessCSS/gulp-bless
[depstat-image]: https://david-dm.org/BlessCSS/gulp-bless.svg?style=flat