Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-modernizr with all npm packages installed. Try it out:

var gulpModernizr = require("gulp-modernizr")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-modernizr v3.4.1

Gulp wrapper for custom Modernizr builds

gulp-modernizr

npm version Build Status

A Gulp wrapper for 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).

Usage

First, install gulp-modernizr as a development dependency:

npm install --save-dev gulp-modernizr

Then, add it to your gulpfile.js:

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:

if (!Modernizr.objectfit) { doSomethingLikeCallAPolyfill(); }

and in this case add the 'objectfit' test to the ouptut file.

API

modernizr(fileName)

fileName

Type: String

You can optionally pass a fileName to name the Modernizr file (defaults to modernizr.js)

gulp.src('./js/*.js')
  .pipe(modernizr('modernizr-custom.js'));

modernizr(/*fileName, */ settings)

settings

Type: Object

You can pass settings as an object. See the customizr repository for valid settings.

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:

{
  'options': ['setClasses'],
  'tests': [
      'webworkers',
      [
          'cssgrid',
          'cssgridlegacy'
      ]
  ],
  excludeTests: ['csstransforms3d']
}

gulpfile.js:

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, regardless of the tests 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:

gulp.src('fake', {allowEmpty: true})
  .pipe(modernizr({
    crawl: false,
    tests: [
      'touchevents',
    ],
  })
)

settings.quiet

Defaults to false, 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 gulp-uglify to achieve this functionality in Gulp:

gulp.src('./js/*.js')
  .pipe(modernizr())
  .pipe(uglify())
  .pipe(gulp.dest("build/"));

License

Copyright (c) 2020 The Modernizr team Licensed under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free