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