How and where to run gulp-bless for IE 9 support?

sage
21

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.

1 Like
22

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

23

I got it working in my gulpfile.js

24

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
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?

25

What a freakin ride…

Finally, got this working. The key element here was to follow @Cianobe example, and also add bless to watch.

My recent gist

1 Like
26

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?

How do can we inspect and see our sourcemaps?

27

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”.

2 Likes
28

There’s some information about the 3.1.0 error at gulp-bless’s GitHub issues here, which indicate the problem is actually with Bless itself, here. Apparently there’s a bless update which fixes this, but I haven’t tried it yet.

29

Yes, that’s why I’ve stuck with gulp-bless 3.0.1 because of the bug I mentioned earlier

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.

30

So, scanning this thread, the solution for the time being is to use gulp-bless 3.0.1 ?