# How and where to run gulp-bless for IE 9 support? **URL:** https://discourse.roots.io/t/how-and-where-to-run-gulp-bless-for-ie-9-support/3780 **Category:** sage **Tags:** gulp **Created:** 2015-05-14T06:04:25Z **Posts:** 30 ## Post 1 by @diggs — 2015-05-14T06:04:25Z We’ve hit the 4096 css selectors limit in \< IE9 and need to split our css up. [Bless.js](http://blesscss.com) does this very well and [gulp-bless](https://www.npmjs.com/package/gulp-bless) seems to be a functioning gulp wrapper for the library. I’m very new to gulp (been using Roots for years but first time with Sage). I easily added a task and have it “blessing” successfully but can’t seem to figure out how to make it work with the --production flag. We are using Bedrock and Capistrano for deploys so automating it is a must. Thanks to the Roots team our workflow is so clean I would hate to hack it up just to support older IE! --- ## Post 2 by @austin — 2015-05-14T07:11:31Z I would put this in the writeToManifest lambda > ``` // ### Write to rev manifest // If there are any revved files then write them to the rev manifest. // See https://github.com/sindresorhus/gulp-rev var writeToManifest = function(directory) { return lazypipe() .pipe(function () { return gulpif('*.css', bless()); }) .pipe(gulp.dest, path.dist + directory) .pipe(browserSync.stream, {match: '**/*.{js,css}'}) .pipe(rev.manifest, revManifest, { base: path.dist, merge: true }) .pipe(gulp.dest, path.dist)(); }; ``` --- ## Post 3 by @diggs — 2015-05-14T19:30:16Z That worked like a charm! Thanks so much. --- ## Post 4 by @JulienMelissas — 2015-05-14T19:36:43Z Mind posting your working gulpfile so that people can reference it when searching for similar threads? Thanks! --- ## Post 5 by @diggs — 2015-05-14T22:47:10Z Turns out it didn’t quite work. It successfully “blessed” the files but then all css is omitted from dist/assets.json when the --production flag is used. Here is my current block of code: ``` // ### Write to rev manifest // If there are any revved files then write them to the rev manifest. // See https://github.com/sindresorhus/gulp-rev var writeToManifest = function(directory) { return lazypipe() .pipe(function () { return $.if('*.css', bless()); }) .pipe(gulp.dest, path.dist + directory) .pipe(function() { return $.if('**/*.{js,css}', browserSync.reload({stream:true})); }) .pipe($.rev.manifest, revManifest, { base: path.dist, merge: true }) .pipe(gulp.dest, path.dist)(); }; ``` --- ## Post 6 by @diggs — 2015-05-15T19:30:10Z @austin I placed the code that you suggested in the writeToManifest lamdba (slightly different code, I am using an earlier version of Sage) which successfully “blessed” the files. However when running `gulp --production` the css is not included in dist/assets.json. Any suggestions? --- ## Post 7 by @kjprince — 2015-05-18T20:42:32Z @diggs I’m having the same issue. Needed to run some css processes but the revv tasks are tripping me up. The complexity of the `gulpfile` makes it challenging to modify without opening another can of worms. --- ## Post 8 by @diggs — 2015-05-18T20:57:28Z @kjprince, agreed. Looks like it’s time to learn Gulp syntax. I feel like the suggestion that @austin made is working but the `return` in the `pipe()` method is nullifying the rest of the `writeToManafest` lambda. I don’t understand enough about Gulp to fix it. As soon as I find a solution I will post it up here! --- ## Post 9 by @kjprince — 2015-05-18T21:03:38Z @diggs Cool. These problems eat up so much dev time, but I suffer from serious investor bias and always think “but hey, when its done, its done.” Interested to learn your solution. --- ## Post 10 by @iamjaredwalters — 2015-08-12T17:55:00Z I successfully integrated gulp-bless into my workflow doing the following: Create a CLI option which will be used to determine when to run gulp-bless. In this case I only wanted it running when the `--production` flag was used: ``` // CLI options var enabled = { // Enable static asset revisioning when `--production` rev: argv.production, // Disable source maps when `--production` maps: !argv.production, // Fail styles task on error when `--production` failStyleTask: argv.production, // Fail due to JSHint warnings only when `--production` failJSHint: argv.production, // Strip debug statments from javascript when `--production` stripJSDebug: argv.production, // Split minified css when '--production' split: argv.production, }; ``` Built a bless task: ``` // ### Bless gulp.task('bless', function() { if(enabled.split) { return gulp.src(path.dist + 'styles/*.css') .pipe(bless()) .pipe(gulp.dest(path.dist + 'styles')); } }); ``` Finally, added the bless task to my build task: ``` // ### Build // `gulp build` - Run all the build tasks but don't clean up beforehand. // Generally you should be running `gulp` instead of `gulp build`. gulp.task('build', function(callback) { runSequence('styles', 'bless', 'scripts', ['fonts', 'images'], callback); }); ``` Now my production css is blessed and IE is happy. --- ## Post 11 by @diggs — 2015-08-17T19:26:06Z @iamjaredwalters this is awesome! I’ll check it out. Thanks for sharing. --- ## Post 12 by @MWDelaney — 2015-09-28T16:19:22Z @iamjaredwalters Thank you! Your post saved me from an angry client. Cheers! --- ## Post 13 by @djmtype — 2015-10-07T00:06:44Z I combined @austin and @iamjaredwalters suggestions. In my `/dist/` two css files are created: `main-blessed1.css` and `main.css`. `main-blessed1.css` is being imported into `main.css`. The problem now when running `gulp watch` in development, source maps are no longer being passed to supported browsers. Am I missing something? --- ## Post 14 by @ash — 2015-10-22T13:51:20Z @diggs Did you guys get the files writing to the assets file? I can get it blessing the files also, but I’ve spent hours trying to get it into the assets file. --- ## Post 15 by @kjprince — 2015-10-22T14:28:35Z @diggs I wasted way too many hours on this so just moved on. Still don’t have a working solution but considering giving this a shot: [https://github.com/postcss/postcss](https://github.com/postcss/postcss) --- ## Post 16 by @ash — 2015-10-22T15:28:51Z I know the feeling, but I will not be beaten :smile: This is what I have now & it does work, up to the point it is overwriting the assets.json file & not merging as it should be. ``` gulp.task('bless', function() { if(enabled.bless) { return gulp.src(path.dist + 'styles/*.css') // Find the original files .pipe(bless()) // Bless them .pipe(gulp.dest(path.dist + 'styles/bless')) // Save them .pipe(rev()) // Add revisioning .pipe(rev.manifest( 'assets.json', { base: revManifest, merge: true // merge with the existing manifest (if one exists) })) .pipe(gulp.dest(path.dist + 'styles/bless')); } ``` }); --- ## Post 17 by @ash — 2015-10-22T15:49:04Z Got it working! ``` gulp.task('bless', function() { if(enabled.bless) { return gulp.src(path.dist + 'styles/*.css') // Find the original files .pipe(bless()) // Bless them .pipe(gulp.dest(path.dist + 'styles/bless')) // Save them .pipe(rev()) // Add revisioning .pipe(rev.manifest( path.dist + 'assets.json', { merge: true // merge with the existing manifest (if one exists) })) .pipe(gulp.dest('')); }}); ``` --- ## Post 18 by @Cianobe — 2015-10-23T07:42:25Z Hi, i am new to Sage and Gulp and trying to get this to work… First it didn’t work and i lost a few hours to get this to work. That’s why i’ve written my steps down to get this to work for you. Thnx to all guys above for the code! So this is what I did: 1. Install Bless via `npm install gulp-bless` [2.In](http://2.In) my **gulpfile.js** I’ve changed following: - added `var bless = require('gulp-bless');` to my Globals in front of the doc - added `.pipe(function () { return gulpif('*.css', bless()); })` to write rev manifest - added `// Split minified css when '--production' split: argv.production,` to my CLI options - builded the **bless task** by using **ash** code (thnx), put his code after JSHint - added bless to my build task `runSequence('styles', 'bless', 'scripts', ['fonts', 'images'], callback);` Now when I run gulp watch or gulp build or even gulp bless everything is working, at least! Here is my [gulpfile.js](https://github.com/Cianobe/sage-gulp-bless/blob/master/gulpfile.js) for the ones who need it. Feel free to correct, if I did anything wrong or improve my file. Thnx in advance! --- ## Post 19 by @ash — 2015-10-23T08:16:22Z @Cianobe Glad I could help. As always I think there maybe a little more room for improvement though. I think it maybe better to be able to run the **Bless** task on the css files without the revisioning on them first, then add the revisioning after, this would allow the _Assets\asset\_path()_ to be used to switch between the development version and production when needed, as currently Bless will add _-blessed1_ to the end of the file name and this will break the _Assets\asset\_path()_ when called. What do you think? --- ## Post 20 by @Twansparant — 2015-12-03T13:44:50Z > [@Cianobe](#): > > added // Split minified css when ‘–production’ split: argv.production, to my CLI options That part is missing in your **gulpfile.js** , but thanks for your code! --- ## Post 21 by @Twansparant — 2015-12-03T14:57:25Z Since I also would like to test my **development** site in IE9, I ended up adding the **bless** task in the gulp `build` & `watch` task as well: ``` // ### Bless gulp.task('bless', function() { return gulp.src(path.dist + 'styles/*.css') .pipe(bless()) .pipe(gulp.dest(path.dist + 'styles')); }); // ### Build gulp.task('build', function(callback) { runSequence('styles', 'bless', 'scripts', ['fonts', 'images'], callback); }); // ### Watch gulp.task('watch', function() { browserSync.init({ files: ['{lib,templates}/**/*.php', '*.php'], proxy: config.devUrl, snippetOptions: { whitelist: ['/wp-admin/admin-ajax.php'], blacklist: ['/wp-admin/**'] } }); gulp.watch([path.source + 'styles/**/*'], ['styles']); gulp.watch([path.source + 'styles/**/*'], ['bless']); gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']); gulp.watch([path.source + 'fonts/**/*'], ['fonts']); gulp.watch([path.source + 'images/**/*'], ['images']); gulp.watch(['bower.json', 'assets/manifest.json'], ['build']); }); ``` The revisioning in the **dist/assets.json** is now done automatically on `--production` as well. --- ## Post 22 by @djmtype — 2016-03-31T20:17:15Z Has anyone revisited this with a sound solution? It seems to be running bless ( I can see from the command line) ``` [16:09:24] Starting 'styles'... [16:09:32] Finished 'styles' after 8.77 s [16:09:32] Starting 'bless'... [16:09:32] Finished 'bless' after 21 μs ``` However, it’s not breaking up the main.css file into two smaller files which I know is (unfortunately) over 4096 selectors. I’ve tried running `gulp`, `gulp build` and `gulp --production`. [My gulpfile.js gist](https://gist.github.com/djmtype/8f415524ed2d7b8eb3ed7f8df8fdc988) --- ## Post 23 by @Twansparant — 2016-04-01T08:27:53Z > [@djmtype](#): > > Has anyone revisited this with a sound solution? It seems to be running bless ( I can see from the command line) I got it working in my [gulpfile.js](https://gist.github.com/Twansparant/afc29acaa5a40b8e985c33e4dde050af) --- ## Post 24 by @djmtype — 2016-04-02T17:48:08Z Thanks for responding @Twansparant. That’s close to what I originally had in an older Sage project I used. Upon further investigation, there’s an issue with the most recent bless v4, now included with gulp-bless v3.1.0. [https://github.com/BlessCSS/bless/issues/93](https://github.com/BlessCSS/bless/issues/93) Since some function in Sage “injects” `@charset`, a typeError monkey wrench gets thrown, causing the bless process to fail. In the interim, I’ve installed an older gulp-bless version. While all compiles fine on `gulp build`, all is not well with `gulp watch`. When running build, `@import url('main-blessed1.css?z=1459617040469');` gets printed inside `main.css`, but while watching, `@import url(…)` never gets added back in even though bless is run. ``` [BS] Watching files... [14:18:01] Starting 'wiredep'... [14:18:01] Starting 'bless'... [14:18:01] Finished 'wiredep' after 164 ms [14:18:01] Starting 'styles'... [14:18:01] Finished 'bless' after 126 ms [BS] 1 file changed (main.css) [14:18:09] Finished 'styles' after 8.21 s ``` Anyone else having this problem? --- ## Post 25 by @djmtype — 2016-04-02T19:17:13Z What a freakin ride… Finally, got this working. The key element here was to follow @Cianobe [example](https://github.com/Cianobe/sage-gulp-bless/blob/master/gulpfile.js), and also add bless to watch. [My recent gist](https://gist.github.com/djmtype/8f415524ed2d7b8eb3ed7f8df8fdc988) --- ## Post 26 by @djmtype — 2016-04-04T23:35:36Z Now, I remember my concern using bless with sass. I posted about it months ago [How and where to run gulp-bless for IE 9 support?](https://discourse.roots.io/t/how-and-where-to-run-gulp-bless-for-ie-9-support/3780/13?u=djmtype) How do can we inspect and see our sourcemaps? --- ## Post 27 by @rysdyk — 2016-04-05T22:57:31Z Thanks for all the good help here. Just wanted to add I had to use gulp-bless v **3.0.1** to make it work. Gulp-bless 3.1.0 returns an error “cannot read property ‘reduce’ for undefined”. --- ## Post 28 by @MWDelaney — 2016-04-08T13:14:45Z There’s some information about the 3.1.0 error at gulp-bless’s GitHub issues [here](https://github.com/BlessCSS/gulp-bless/issues/22), which indicate the problem is actually with Bless itself, [here](https://github.com/BlessCSS/bless/issues/93). Apparently there’s a bless update which fixes this, but I haven’t tried it yet. --- ## Post 29 by @djmtype — 2016-04-10T15:08:53Z Yes, that’s why I’ve stuck with gulp-bless 3.0.1 because of [the bug I mentioned earlier](https://discourse.roots.io/t/how-and-where-to-run-gulp-bless-for-ie-9-support/3780/24) The difficulty I’m having when using bless with Sage is how to get Web Inspector to read back the sass sourcemaps because they’re no longer passed after the css has been blessed. I understand most people only use bless on production builds, but I need sass sourcemaps in order to debug IE9. --- ## Post 30 by @orionrush — 2019-04-30T12:54:19Z So, scanning this thread, the solution for the time being is to use gulp-bless 3.0.1 ?