Gulpを使用してChromeでライブリビルドが動作しない、何が見つかりません

Question

Gulp、Sublime Text 3、Chromeを使用してLiveRoadを使用しようとしていますが、何らかの理由で動作しません。ここに私がしたことがあります。

1. ChromeにLiveRoad拡張機能をインストールしました。
2. gulp-livereloadがインストールされています。
3. セットアップgulpfile.js。
4. ランガンプ。

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

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

マイ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" 
    } 
} 

Answer 1

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

1. ChromeにLiveRoad拡張機能をインストールしました。
2. インストールされているプラ​​グインnpm install gulp-connect
3. gulpfile.jsをセットアップします（下記のコードを参照）。
4. ブラウザに移動してURLにアクセスしてくださいhttp://localhost:8080/
5. ブラウザでliverelaodアイコンをクリックしてください。
6. gulpを実行します。
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-20903

Answer 2

基本をカバーするために申し訳ありませんが、我々はすべてが時々出て捕まります。

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

ライブリロードサーバが実行されている場合は、途中に灰色の点が表示されます。そのような

：

ので、同じようにエラーが出ますされていない場合：。

は「必ずそのLiveReload 2.3（またはそれ以降）にするか、別の互換性のあるサーバーが実行されてくださいLiveReloadサーバーに接続できませんでしたが"

Answer 3

ローカルに開発する場合は、Chromeの拡張機能設定で[ファイルURLへのアクセスを許可する]のにLiveReloadが選択されていることを確認してください。

私はLiveReloadアイコンをクリックしたときに何もしなかったのと同じ問題を抱えている可能性があります。

Answer 4

私にとって重要なことは、ブラウザを再起動することでした。あなたは仕事に、このため、接続一気を追加する必要はありません - ちょうど次の操作を行います

1. あなたgulpfileとpackage.jsonを設定livereload Chrome拡張機能
2. をインストールします（OPがとても正しく行われていた）
3. クロム：//拡張子に移動し、[ファイルURLへのアクセスを許可する]チェックボックスをオンにします。
4. 再起動クロム！
5. テストしているページに移動し、ライブリロードアイコンをクリックします。アイコンの中央の円が塗りつぶされていることに気付くはずです。
6. コードの編集を開始し、自動再読み込み機能によって保存された貴重な時間を驚かせます。