Gulp wrapper for custom Modernizr builds
npm install gulp-modernizr
Note: This plugin uses version 3 of Modernizr. Make sure to check the Github repo for the correct feature names (example: ``Modernizr.touch` was renamed to `Modernizr.touchevents`).
First, install gulp-modernizr as a development dependency:
`shell`
npm install --save-dev gulp-modernizr
Then, add it to your gulpfile.js:
`javascript
var modernizr = require('gulp-modernizr');
gulp.task('modernizr', function() {
return gulp.src('./js/*.js')
.pipe(modernizr())
.pipe(gulp.dest('build/'))
});
`
Running the plugin will search for tests in your src files like this one for example:
`javascript`
if (!Modernizr.objectfit) { doSomethingLikeCallAPolyfill(); }
and in this case add the 'objectfit' test to the ouptut file.
#### fileName
Type: String
You can optionally pass a fileName to name the Modernizr file (defaults to modernizr.js)
`javascript`
gulp.src('./js/*.js')
.pipe(modernizr('modernizr-custom.js'));
#### settings
Type: Object
You can pass settings as an object. See the customizr repository for valid settings.
`javascript`
gulp.src('./js/*.js')
.pipe(modernizr({
'options': ['setClasses'],
'tests': [
'webworkers',
[
'cssgrid',
'cssgridlegacy'
]
],
excludeTests: ['csstransforms3d']
})
);
The 'settings' object can also be required from a JSON file:
modernizr-config.json:
`javascript`
{
'options': ['setClasses'],
'tests': [
'webworkers',
[
'cssgrid',
'cssgridlegacy'
]
],
excludeTests: ['csstransforms3d']
}
gulpfile.js:
`javascript`
gulp.src('./js/*.js')
.pipe(modernizr(require('./modernizr-config.json')))
#### Available Settings
##### See the customizr repository for valid settings.
#### settings.crawl
By default, glup-modernizr will not output any Modernizr.js if your gulp.src does not contain any file, tests
regardless of the you may have set.
If you only want to output a Modernizr.js file with some tests you set, just pass a fake path to gulp.src:
`javascript`
gulp.src('fake', {allowEmpty: true})
.pipe(modernizr({
crawl: false,
tests: [
'touchevents',
],
})
)
#### settings.quiet
Defaults to , setting it to true suppresses any log output from customizr
#### settings.uglify
Will never be passed to customizr, see the Gulp guidelines. The option to uglify the build goes against guidelines #1 and #3. Thus, this setting has been removed from this plugin. You may use to achieve this functionality in Gulp:
`javascript``
gulp.src('./js/*.js')
.pipe(modernizr())
.pipe(uglify())
.pipe(gulp.dest("build/"));