Comment puis-je regarder les fichiers avec gulp-browserify mais le processus d'un seul?

Je suis en train de câbler gulp-browserify et gulp-montre pour reconstruire mon bundle chaque fois qu'un fichier de source de changements. Cependant, gulp-browserify nécessite un point d'entrée unique pour la compilation (par exemple,src/js/app.js) et va chercher de toute dépendance elle-même:

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

Cependant, avec gulp-watch cela ne parvient pas à reconstruire à chaque changement, car seul le point d'entrée de fichier est en train d'être regardé. Ce que j'ai réellement besoin est une possibilité de regarder plusieurs fichiers et de les traiter uniquement le point d'entrée de fichier (cherchez replaceEverythingWithEntryPointFile):

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

La question est donc: comment puis-je point gulp-browserify à l'entrée du fichier de point et de déclencher reconstruire sur une modification dans un fichier source? Ce serait bien si la solution comprenait limitation: lors du démarrage, chaque fichier source est mis en place pour regarder et donc de notre point d'entrée dossier serait transmis à gulp-browserify autant de fois qu'il y a des fichiers, ce qui est inutile.

OriginalL'auteur Nikolai Prokoschenko | 2014-02-16

  1. 26

    Appelez simplement une tâche normale sur la modification 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 (parce qu'il peut regarder pour les nouveaux fichiers), alors vous devez faire quelque chose comme ceci:

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

    À l'aide de gulp-watch a aussi l'avantage d'opérations de traitement par lots, donc si vous modifier plusieurs fichiers à la fois, vous ne serez pas obtenir un tas de personnages dans une rangée.

    Assurez-vous juste de retour de ce flot! return gulp.src('src/js/app.js') ...
    Oh, merde, comment j'ai pu rater ça. Merci, mis à jour!
    Avec la nouvelle version de gulp-montre, vous devez appeler la fonction de rappel. gulp.task("watch", function() { watch({glob: "src/**/*.js"}, function(files, cb) { gulp.start("build-js", cb); }); });

    OriginalL'auteur OverZealous

  2. 8

    gulp-browserify a été la liste noire sur le npm-référentiel

    La méthode préférée consiste à utiliser browserify directement en combinaison avec vinyle-source-ruisseau.

    Cela signifie déclarant browserify et vinyle-source-ruisseau dans votre script de construction:

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

    Puis de les utiliser dans vos fonctions pour construire votre fichier JS. 

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

    Avec ce fait, browserify permettra de créer une dépendance de l'arbre à l'aide de la('...') appels en vendor.js et de construire un nouveau vendor.js où toutes les dépendances sont modulables et tiré dans un seul vendor.js fichier.

    Je pense que tu veux dire gulpify, pas de clin d'oeil, browserify?

    OriginalL'auteur Ryan Kimber

  3. 1

    Adaptation @Exagérée de la réponse à un total gulp newb, voici la gulpfile.js code, avec inline explications. (Ce fichier doit être placé à la racine du projet et l'exécuter à partir de cet emplacement, et c'est tout ce que vous auriez besoin d'autre que le mécanisme national de prévention installe détaillée 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 de trois exige de, si pas déjà installé:

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

    Merci de ne pas accepter cette réponse comme il a été adapté à partir de @excès de Zèle.
    Comme une alternative à tous les ci-dessus, vous pouvez essayer https://github.com/substack/watchify (n'essayez pas moi-même), mais un gestionnaire de tâches approche, comme ci-dessus, peuvent également mettre à l'échelle pour vous lorsque vous aurez besoin de plus de choses en cours d'exécution pour votre construction au-delà de juste browserify.

    OriginalL'auteur matanster