Sources :
- Doc officielle à propos des fichiers externes de configuration au format JSON : Gulp recipes – Using external config file
- M’a donné la solution : Gulp Minify & Concat Javascript
- M’ont seulement mis sur la voie : Javascript: get package.json data in gulpfile.js, How To Keep Your Gulp Configuration Options In A JSON File
- How to Simplify Your Development Workflow with Gulp
Problématique :
Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :
- L’ensemble des fichiers JS stockés dans un dossier
./src/jsqui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets. - Une sélection de fichiers JS stockés dans un dossier
./src/vendor/[...]qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).
.
J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "js" : { "vendor" : [ "./src/vendor/browser-detection/src/browser-detection.js", "./src/vendor/foundation/js/foundation.js", "./src/vendor/modernizr/lib/metadata.js", "./src/vendor/jquery-mobile/js/events/navigate.js", "./src/vendor/jquery-mobile/js/events/touch.js", "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js", "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js", "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js" ] } } |
Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :
|
1 2 3 4 5 |
[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed [09:26:53] Starting 'clear_vendor_cache'... [09:26:53] Finished 'clear_vendor_cache' after 1.56 ms [09:26:53] Starting 'js'... [09:26:53] Finished 'js' after 4.67 ms |
Solution :
A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :
|
1 2 3 |
var appFiles = { scripts: [paths.scripts.src + '*.js', './gulpconf.json'] }; |
|
1 2 |
var fs = require('fs'); var gulpconf = "./gulpconf.json"; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
gulp.task('js:vendor',function(){ var json = JSON.parse(fs.readFileSync(gulpconf)), vendorjs = json.js.vendor; gulp.src(vendorjs) .pipe(plugins.uglify()) .pipe(plugins.rename(function(opt) { opt.basename = opt.basename.replace(/\./g,'-'); return opt; })) .pipe(plugins.size()) .pipe(gulp.dest(paths.scripts.dest)); }); gulp.task('js:custom', function() { gulp.src(paths.scripts.src + '*.js') .pipe(plugins.uglify()) .pipe(plugins.rename(function(opt) { opt.basename = opt.basename.replace(/\./g,'-'); return opt; })) .pipe(plugins.size()) .pipe(gulp.dest(paths.scripts.dest)); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){ gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']); gulp.watch(appFiles.styles, ['style']).on('change', function(evt) { changeEvent(evt); }); gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) { changeEvent(evt); }); gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) { changeEvent(evt); }); }); |