We’ve hit the 4096 css selectors limit in < IE9 and need to split our css up. Bless.js does this very well and 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!
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)();
};
That worked like a charm! Thanks so much.
Mind posting your working gulpfile so that people can reference it when searching for similar threads?
Thanks!
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)();
};@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?
@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.
@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!
@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.
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.
6 Likes
@iamjaredwalters this is awesome! I’ll check it out. Thanks for sharing.
@iamjaredwalters Thank you! Your post saved me from an angry client. Cheers!
1 Like
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!