12

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

  1. Chrome に Livereload 拡張機能をインストールしました。
  2. gulp-livereload をインストールしました。
  3. gulpfile.js をセットアップします。
  4. ゴクリ。

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

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

私のガルプファイル:

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"
  }
}
4

5 に答える 5

23

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

  1. Chrome に Livereload 拡張機能をインストールしました。
  2. インストールされたプラグインnpm install gulp-connect
  3. gulpfile.js をセットアップします (以下のコードを参照)。
  4. ブラウザーに移動し、URL http://localhost:8080/に移動します。
  5. ブラウザで liveelaod アイコンをクリックします。
  6. ガルプを実行します。
  7. 終わり。

私のガルプファイル:

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

于 2015-09-05T12:36:56.093 に答える
12

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

私も同じ問題を抱えていたのかもしれません。LiveReload アイコンをクリックしても何も起こりませんでした。

于 2016-01-22T19:22:35.490 に答える
6

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

  1. livereload chrome 拡張機能をインストールする
  2. gulpfile と package.json を構成します (OP は正しく構成しました)。
  3. chrome://extensionsに移動し、[ファイル URL へのアクセスを許可する] チェックボックスをオンにします。
  4. クロムを再起動してください!
  5. テストしているページに移動し、livereload アイコンをクリックします。アイコンの中央にある円が塗りつぶされていることに注意してください。
  6. コードの編集を開始し、自動リロード機能によって節約された貴重な秒数に驚嘆してください。
于 2016-08-13T09:52:42.593 に答える
2

基本をカバーして申し訳ありませんが、私たちは皆、時々巻き込まれます.

Chrome の livereload ボタンをクリックしましたか?

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

そのようです:livereload Chrome 拡張機能

そうでない場合は、次のようなエラーが表示されます。

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

于 2015-09-05T10:50:42.970 に答える
0

ライブ リロード ブラウザ ページを使用しています

ライブ リロード ブラウザ ページ

ブラウザ設定

Google Chrome マーケットからダウンロード

ここに画像の説明を入力


ガルプ設定

インストール

npm i live-reload-bp --save-dev

const
  gulp = require('gulp'),
  liveReloadBP = require("live-reload-bp"),
  plumber = require('gulp-plumber'),
  gulpSass = require('gulp-sass'),
  postcss = require('gulp-postcss'),
  cssnano = require('cssnano'),
  webServer = require('./web-server');

const 
  cssWatch = 'src/scss/*.scss',
  cssSrc = ['src/scss/*.scss'],
  cssDest = 'dest/css';

const 
  liveReload = new liveReloadBP({
    host: '127.0.0.1', 
    port: '8080'
  });


function css() {
  return gulp.src(cssSrc)
  .pipe(plumber({errorHandler: onError}))        
  .pipe(gulpSass().on('error', gulpSass.logError))   
  .pipe(postcss([
      cssnano({zindex: false, reduceIdents: false})
  ]))     
  .pipe(gulp.dest(cssDest));
}


function onError(err){
  /* Here can be used: 
    https://github.com/Yuriy-Svetlov/live-alert-bp
  */

  liveReload.setError();  // This usage is optional. You can not use this, if you want your page to reload anyway.

  this.emit('end');
}


function reloadPage(ok){
  if(liveReload.hasError() === false){ // This usage is optional. You can not use this, if you want your page to reload anyway.
    liveReload.reloadPage();
  }

  liveReload.resetError();

  ok();
}


function watch(){
  liveReload.run();
  // webServer();

  gulp.watch(cssWatch, gulp.series(css, reloadPage));
}


exports.css = css;
exports.watch = watch;
exports.reloadPage = reloadPage;
exports.start = gulp.series(css, watch);

または、Gulp gulp-live-reload-bp に使用できます

Gulp で Live Reload Browser Page を使用する方法の例

live-reload-browser-page.com

于 2022-02-22T21:37:09.243 に答える