Pourquoi le rechargement en direct ne fonctionne-t-il pas avec gulp-connect?

- Je utiliser gulp-connect comme ceci:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);

  gulp.watch(distPaths, function() {
    return gulp.src(distPaths)
               .pipe(connect.reload());
  });
});

Le live reload bits fonctionne très bien.

Ma question est, pourquoi la suivante ne fonctionne pas:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);
  gulp.watch(distPaths, connect.reload);
});

Ce que le gulp.src(distPaths) bit est pour?

Aussi, quelle est l'importance de return?

source d'informationauteur Misha Moroshko

  1. 20

    1. connect.reload() doit être utilisé dans un flux. Dans votre exemple, vous essayez de l'appeler comme une fonction autonome, qui ne fait rien. L'appel de connect.reload() renvoie un flux de gestionnaire qui prend en entrée et en fait quelque chose avec elle. C'est effectivement un non-op dans le deuxième exemple.

    2. Vous avez besoin return ou les tâches sont exécutées de façon synchrone. (Vous pouvez également le retour d'une promesse ou d'utiliser la fonction de rappel.)

      En gros, si vous ne fournissez pas d'une certaine façon pour gulp pour suivre l'avancement de vos tâches asynchrones, il est à supposer qu'elles sont complètes lorsque vous êtes de retour de la fonction. Si vous return la conduite, il peut écouter pour atteindre la fin.

    Aussi, il pourrait fonctionner mieux utiliser gulp-montre de votre montre, parce qu'il ne passe à travers les fichiers modifiés, qui est ce que vous voulez pour live reload:

    var watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch(paths.scss, ['scss']);
    watch(distPath).pipe(connect.reload());
});
  2. 3

    Il m'a fallu aussi un certain temps à comprendre comment je me connecte la fonction reload avec ma configuration.
    Ma montre tâche comprend plus d'un dossier que je ne suis pas toujours en cours d'exécution d'une construction complète de la tâche alors que je suis en train d'élaborer. Certains fichiers sont chargés à partir d'un .dossier tmp, basé sur le Yeoman gulp-webapp générateur. Je ne suis pas sûr si ce est le moyen le plus rapide, mais je l'ai résolu comme ceci:

     gulp.watch([
    '.tmp/*.html',
    '.tmp/styles/**/*.css',
    'app/js/**/*.js',
    'app/images/**/*'
]).on('change', function (file) {
    gulp.src( file.path)
        .pipe( $.connect.reload() );
});

    Espère que ça aide quelqu'un.

  3. 2

    Je ne pas bien comprendre pourquoi (@excès de zèle rend bien des points), mais j'ai trouvé que ma moins de dossiers étaient en cours d'actualisation constante de "une version, derrière", similaire à ce problème posté à générateur-gulp-webapp: Livereload semble être un enregistrer derrière sur le chargement des modifications #77

    Depuis la version 0.3.0 générateur-gulp-webapp utilise browsersync au lieu de se connecter/livereload, et la mise à jour de mon gulpfile pour correspondre à résolu tous mes problèmes!

    HTH