Modernizr custom build

sage
1

I’m using Sage 8.1.1 for a project and finalizing everything - running the ‘gulp build --production’ task.

I remember that when Sage/Roots used grunt, there was a task that created a custom modernizr build by going through the CSS and detecting any feature ‘class’ usages and building modernizr against that list, in addition you could explicitly add features into the build task.

What happened to that build task in gulp? I looked briefly at the latest Sage version (8.2.1) and didn’t see anything that looked like a modernizr build task.

Should I just build modernizr manually by picking the features I want? I really liked that automatic build task in grunt.

2

Yeah just do that. That’s what I do if I find myself caring enough.

If you want to take it a step further, the proper process is:

  1. Measure page performance with full modernizr build
  2. Manually build a copy of modernizr by picking the features you want and then vendoring it. Measure the page performance with the customized build.
  3. Was there a significant difference?

If you do find an attractive difference: weigh the costs and benefits of automating the process.

As far as automating the process:

Factor into your cost/benefit discussion the fact that these tools have bugs and they will break your build at some point.

3 Likes
3

Anyone have any hints to add back modernizr to SAGE theme? I have spent hours trying to do it via npm, composer, bower, etc… I am back at square one and pulling out my hair. Any info on how to get this package into my project and GULP it down would help.

4

Since Sage is on Github and in git, all you would need to do is go back to the commit where it was removed and add everything back in: https://github.com/roots/sage/commit/4281e6f932b9bb1242be35d2b1f1ce78447e81e7

2 Likes
5

There is already a modernizr wrapper created for gulp: gulp-modernizr

A gulp task could be created similar to below, and added as a dependency to the watch/build tasks.

var modernizr = require('gulp-modernizr'); gulp.task('modernizr', function(){ return gulp.src(paths.source + 'js/**/*.js') .pipe(modernizr('modernizr-build.js')) .pipe(gulp.dest(paths.dist + '/js/vendor/')); });

1 Like