web-dev-qa-db-ja.com

Chrome Gulpを使用してLivereloadが機能しない、何が欠けているのか

Gulp、Sublime Text 3、およびChrome=を使用してLivereloadを使用しようとしていますが、何らかの理由で機能しません。これが私が行ったことです。

  1. ChromeにLivereload拡張機能をインストールしました。
  2. インストールされたgulp-livereload。
  3. Gulpfile.jsを設定します。
  4. ラン・ガルプ。

ここで何が欠けていますか？ Sublime Text 3のLivereloadプラグインをインストールする必要がありますか？

FYI-ChromeのLivereload拡張機能の[オプション]ボタンはグレー表示されています。

私の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']);

パッケージファイル：

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}
google-chromegulplivereloadgulp-sassgulp-livereload
9
fs_tigre

これは私がやったことです。プラグインを使用しましたgulp-connectの代わりにgulp-livereload。

  1. ChromeにLivereload拡張機能をインストールしました。
  2. インストールされたプラグインnpm install gulp-connect。
  3. Gulpfile.jsをセットアップします（以下のコードを参照）。
  4. ブラウザに移動し、URLに移動します http：// localhost：8080 /
  5. ブラウザーでリベラロードのアイコンをクリックします。
  6. ぐるぐる実行します。
  7. できました。

私の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']);

パッケージファイル：

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

参照リンク：

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-209

19
fs_tigre

ローカルで開発する場合は、Chromeの拡張機能の設定で、LiveReloadに'Allow access to file URLs'がチェックされていることを確認してください。

同じ問題が発生している可能性があります。LiveReloadアイコンをクリックしても、何も実行されませんでした。

10
thunderdunk

私にとって重要なことは、ブラウザを再起動することでした。これを機能させるためにgulp-connectを追加する必要はありません-以下を実行してください：

  1. Livereload chrome拡張機能をインストールします
  2. Gulpfileとpackage.jsonを構成します（OPは正しく行っていました）
  3. chrome：// extensionsに移動し、[ファイルのURLへのアクセスを許可する]チェックボックスをオンにします
  4. Chromeを再起動してください。
  5. テストするページに移動し、livereloadアイコンをクリックします。アイコンの中央にある円が塗りつぶされていることに注意してください。
  6. コードの編集を開始し、自動再読み込み機能によって節約された貴重な秒に驚嘆します。
5
Chris

基本をカバーして申し訳ありませんが、私たちは皆、時々邪魔されます。

chromeのlivereloadボタンをクリックしましたか？

ライブリロードサーバーが実行中の場合、中央に灰色のドットが表示されます。

そのようです： - livereload chrome extension on

そうでない場合は、次のようなエラーが発生します。

「LiveReloadサーバーに接続できませんでした。LiveReload2.3以降または互換性のある別のサーバーが実行されていることを確認してください。」

2
Tracey Turn