Ajouter les sources de Modernizr comme dépendances NPM
Source: Modernizr documentation > Downloading Modernizr > Command Line Config.
|
1 |
npm install --save-dev modernizr |
Installer également le paquet gulp-modernizr.
|
1 |
npm install --save-dev gulp-modernizr |
Ce plugin permet tout un tas de paramétrages détaillés ici. Pour l’heure, nous exploiterons uniquement les champs options et tests.
gulpconf.json
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "plugins": { "modernizr": { "options" : [ "setClasses" ], "tests" : [ "touchevents" ] } }, } |
Ici je créer un custom build avec uniquement la feature touchevents à déclarer sous tests.
Connaître les options requises en fonction des features qu’on souhaite embarquer
Pour vous aider à savoir quelles sont les options requises en fonction des features que vous souhaitez utiliser, vous pouvez créer votre custom build via l’interface en ligne disponible sur modernizr.com.
Choisissez par exemple la feature touchevents et cliquez sur BUILD (bouton rose en haut à droite). Une modale apparaît. Sous Grunt config cliquez sur « Copy to clipboard ». Le code suivant apparaît:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "crawl": false, "customTests": [], "dest": "/PATH/TO/modernizr-output.js", "tests": [ "touchevents" ], "options": [ "setClasses" ], "uglify": true } |
Les champs options et tests révèlent les pré-requis à renseigner dans la configuration de votre plugin Gulp.
gulpfile.js
Déclarer gulp-modernizr:
|
1 |
var modernizr = require('gulp-modernizr'); |
Puis initialiser la tâche de build:
|
1 2 3 4 5 |
gulp.task('build:modernizr', function() { gulp.src('./js/*.js') .pipe(modernizr('modernizr-custom.js', config.plugins.modernizr)) .pipe(gulp.dest(config.paths.scripts.dest)) }); |