@iamjaredwalters this is awesome! I’ll check it out. Thanks for sharing.
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?
@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.
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
I know the feeling, but I will not be beaten 
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'));
}
});
1 Like
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(''));
}});
1 Like
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:
- Install Bless via
npm install gulp-bless
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 for the ones who need it.
Feel free to correct, if I did anything wrong or improve my file.
Thnx in advance!
2 Likes
@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?
That part is missing in your gulpfile.js, but thanks for your code!
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
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.
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?
What a freakin ride…
Finally, got this working. The key element here was to follow @Cianobe example, and also add bless to watch.
1 Like
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?
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
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.
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.
So, scanning this thread, the solution for the time being is to use gulp-bless 3.0.1 ?