Livereload ne fonctionne pas sous google Chrome à l'aide de Gulp, ce qui me manque

Je suis en train d'utiliser Livereload à l'aide de Gulp, Sublime Text 3 et Chrome, mais pour quelque raison il ne fonctionne pas. Voici ce que j'ai fait.

  1. Installé le Livereload extension dans Chrome.
  2. Installé gulp-livereload.
  3. D'installation gulpfile.js.
  4. Couru gulp.

Ce qui me manque ici? Dois-je installer le Livereload plugin pour Sublime Text 3?

FYI - le bouton Options dans La Livereload extension dans Chrome est en grisé.

Mon Gulpfile:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles']);

Fichier De Package:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

OriginalL'auteur fs_tigre | 2015-09-04

  1. 20

    C'est ce que j'ai fait qui a fonctionné. J'ai utilisé le plugin gulp-connect au lieu de la gulp-livereload.

    1. Installé le Livereload extension dans Chrome.
    2. Installé le plugin npm install gulp-connect.
    3. D'installation gulpfile.js (voir le code ci-dessous).
    4. Aller à votre navigateur et aller à l'URL http://localhost:8080/
    5. Cliquez sur le liverelaod icône dans le navigateur.
    6. Exécuter gulp.
    7. Fait.

    Mon Gulpfile:

    var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var connect = require('gulp-connect');

    
gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

gulp.task('watchMyStyles', function() {
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles', 'connect']);

    Fichier De Package:

    {
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-sass": "^2.0.4"
  }
}

    Liens De Référence:

    https://www.youtube.com/watch?v=KURMrW-HsY4&index=7&list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

    http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

    J'ai fait de même, aucune idée de pourquoi gulp-livereload ne fonctionne pas
    J'ai eu le même problème avec gulp-livereload et chrome, même avec activer les url de fichiers cochés dans google chrome, livereload paramètres de l'extension. Commutation de gulp-connect travaillé
    Merci pour ce — gulp-connectez-vous facilement travaillé la première fois pour moi.

    OriginalL'auteur fs_tigre

  2. 9

    Lors de l'élaboration localement assurez-vous que "Autoriser l'accès à l'Url de fichier' est cochée pour LiveReload dans google Chrome Extensions de paramètres.

    J'ai peut-être été d'avoir le même problème, quand j'ai cliqué sur le LiveReload l'icône qu'elle n'a tout simplement pas quoi que ce soit.

    OriginalL'auteur thunderdunk

  3. 4

    L'essentiel pour moi était en train de redémarrer le navigateur. Vous n'avez pas besoin d'ajouter gulp-connect pour que cela fonctionne - il suffit de faire ce qui suit:

    1. Installer le livereload extension chrome
    2. Configurer votre gulpfile et l'emballage.json (l'OP avait fait correctement)
    3. Aller à chrome://extensions et cochez la case "Autoriser l'accès à l'Url de fichier'
    4. Redémarrez google chrome!
    5. Accédez à la page que vous faites des tests et cliquez sur le livereload icône. Vous devriez remarquer que le cercle au milieu de l'icône devient rempli.
    6. Début de la modification de code et de s'émerveiller de la de précieuses secondes enregistrées par l'auto-rechargement de la fonctionnalité.

    OriginalL'auteur Chris

  4. 2

    Désolé pour couvrir les bases, mais nous avons tous pris de temps en temps.

    avez-vous cliqué sur le livereload bouton dans chrome?

    si le live reload serveur est en cours d'exécution si vous avez un solide point gris dans le milieu.

    comme suit: Livereload ne fonctionne pas sous google Chrome à l'aide de Gulp, ce qui me manque

    Sinon vous obtiendrez un message d'erreur comme ceci:

    "Impossible de se connecter à LiveReload serveur. Assurez-vous que LiveReload 2.3 (ou version ultérieure) ou un autre appareil compatible serveur est en cours d'exécution."

    OriginalL'auteur Tracey Turn