Comment je regarde les fichiers mutliple avec gulp-browserify mais ne traite qu'un seul?

J'essaie de câbler gulp-browserify et gulp-browserify gulp-watch pour reconstruire mon bundle chaque fois qu'un fichier source change. Cependant, gulp-browserify nécessite un point d'entrée unique pour la compilation (par exemple, src/js/app.js ) et récupère chaque dépendance elle-même:

 gulp.src('src/js/app.js') .pipe(browserify()) .pipe(gulp.dest('dist'))

Cependant, avec gulp-watch cela ne permet pas de se reconstruire à chaque changement, car seul le fichier de point d'entrée est surveillé. Ce dont j'ai réellement besoin, c'est la possibilité de regarder plusieurs fichiers puis de traiter uniquement le fichier de point d'entrée (recherche de replaceEverythingWithEntryPointFile ).

 gulp.src("src/**/*.js") .pipe(watch()) .pipe(replaceEverythingWithEntryPointFile()) // <- This is what I need .pipe(browserify()) .pipe(gulp.dest("dist"));

Donc, la question est la suivante: comment puis-je signaler gulp-browserify au fichier de point d'entrée et déclencher la reconstruction sur une modification dans n'importe quel fichier source? Seriez agréable si la solution incluait l'étranglement: lors de la mise en service, chaque fichier source est configuré pour regarder et donc notre fichier de point d'entrée serait canalisé pour gulp-browserify par gulp-browserify autant de fois qu'il y a de fichiers, ce qui n'est pas nécessaire.

Appelez juste une tâche normale sur le changement de fichier, comme ceci:

 gulp.task("build-js", function() { return gulp.src('src/js/app.js') .pipe(browserify()) .pipe(gulp.dest('dist')) }); gulp.task("watch", function() { // calls "build-js" whenever anything changes gulp.watch("src/**/*.js", ["build-js"]); });

Si vous souhaitez utiliser gulp-watch (car il peut rechercher de nouveaux fichiers), vous devez faire quelque chose comme ceci:

 gulp.task("watch", function() { watch({glob: "src/**/*.js"}, function() { gulp.start("build-js"); }); });

L'utilisation de gulp-watch bénéficie également des opérations de traitement par lots, donc, si vous modifiez plusieurs fichiers à la fois, vous n'obtiendrez pas un tas de compilations d'affilée.

Gulp-browserify a été classé en noir sur le repository npm

La méthode préférée consiste à utiliser le navigateur directement en combinaison avec vinyl-source-stream.

Cela signifie déclarer navigateur et vinyle-source-stream dans votre script de construction:

 var browserify = require('browserify'), source = require('vinyl-source-stream');

Et ensuite, les utiliser dans vos fonctions pour créer votre fichier JS combiné.

 function buildVendorJs() { return browserify('./js/vendor.js') .bundle() .pipe(source('./js/vendor.js')) .pipe(debug({verbose: true})) .pipe(gulp.dest(outputDir)); }

Avec cela fait, browserify créera un arbre de dépendance en utilisant les appels nécessaires ('…') dans vendor.js et construira un nouveau fournisseur.js où toutes les dépendances sont modulées et intégrées dans un seul fichier vendor.js.

Adaptation de la réponse @OverZealous à un nouveau gulp newb, voici le code gulpfile.js , avec des explications en ligne. (Ce fichier serait placé sur la racine du projet et s'exécute à partir de cet emplacement, et c'est tout ce dont vous auriez besoin autrement que les installations npm détaillées en bas).

 var gulp = require('gulp'); var watch = require('gulp-watch'); var browserify = require('gulp-browserify'); // // task for building - invoked simply via 'gulp' // gulp.task('default', function() { return gulp.src('public-script-source/main.js') /* source to build */ .pipe(browserify()) .pipe(gulp.dest('public/script')) /* output directory */ }); // // task for continuously building upon javascript change - // invoked via 'gulp watch' // gulp.task("watch", function() { watch({glob: "public-script-source/*.js"}, function() { gulp.start("default"); }); });

N'oubliez pas npm l'installation des trois requêtes, si elles ne sont pas déjà installées:

 npm install --save-dev gulp gulp-watch gulp-browserify

N'accepte pas cette réponse car elle a été adaptée de @OverZealous. En alternative à tout ce qui précède, vous pouvez essayer https://github.com/substack/watchify (ne l'ai pas essayé moi-même), mais une approche de gestionnaire de tâches, comme ci-dessus, peut également vous adapter lorsque vous avez besoin de plus tard Les choses qui fonctionnent pour votre build au-delà de simplement browserify .