Gulp、Sublime Text 3、およびChrome=を使用してLivereloadを使用しようとしていますが、何らかの理由で機能しません。これが私が行ったことです。
ここで何が欠けていますか? 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"
}
}
これは私がやったことです。プラグインを使用しましたgulp-connect
の代わりにgulp-livereload
。
npm install gulp-connect
。私の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
ローカルで開発する場合は、Chromeの拡張機能の設定で、LiveReloadに'Allow access to file URLs'がチェックされていることを確認してください。
同じ問題が発生している可能性があります。LiveReloadアイコンをクリックしても、何も実行されませんでした。
私にとって重要なことは、ブラウザを再起動することでした。これを機能させるためにgulp-connectを追加する必要はありません-以下を実行してください: