web-dev-qa-db-ja.com

gulpをlivereloadで動作させる

Gulpfileをコンパイルするためのsassがあり、「live-reloadダンプから離れてcodekit "。このスタイルのインジェクションを機能させるのに苦労しています。これを設定しようとしています： https://github.com/vohof/gulp-livereload

そして、ターミナルでgulpを実行すると、sassがコンパイルされているように見えますが、スタイルが挿入されていません。私は何が間違っているのですか？ chrome +次のノードモジュールにlivereload拡張機能をインストールしました：

  "devDependencies": {
    "gulp": "~3.5.0",
    "gulp-sass": "~0.6.0"
  },
  "dependencies": {
    "gulp-livereload": "~0.2.0",
    "tiny-lr": "0.0.5"
  }

そして私のgulpfileは次のようになります：

var gulp = require('gulp');

//plugins
var sass = require('gulp-sass'),
    lr = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server = lr();

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


// Rerun tasks when a file changes
gulp.task('watch', function () {
    server.listen(35729, function (err) {

        if (err) return console.log(err);

        gulp.watch('scss/**/*.scss', ['sass']);

    });
});





// The default task (called when you run 'gulp' from cli)
// "sass" compiles the sass to css
// "watch" looks for filechanges, and runs tasks accordingly
gulp.task('default', ['sass', 'watch']);

どんな助けでも大歓迎です。ありがとう！

sasslivereloadgulp
9
Malibur

ローカルホストから実行していますか？ Chromeのプラグインから設定に移動し、ファイルURLのオプションを確認します：chrome：// extensions /

12
Brian Glaz

gulp-livereloadを使用している場合、tiny-lrも使用しても意味がないと思います。

LiveReload統合の実用的な例は次の場所にあります。

https://github.com/kriasoft/spa-seed.front-end -SPAフロントエンドスターターキット

4
Konstantin Tarkus

LivereloadをGulpで起動して実行するためのすべてのポイントを説明するこの素晴らしいチュートリアルに出くわしました。

http://rhumaric.com/2014/01/livereload-magic-gulp-style/

4
Dmitri Zaitsev

これが私の解決策です

  • このnpmモジュールのみが必要ですnpm install gulp gulp-sass gulp-livereload express --save-dev

  • Scss-ファイルを/app/stylesに、Html-ファイルを/app/に配置します

  • Chrome用の live-reload-plugin をインストールします。

  • http：// localhost：40 に移動し、現在のタブのpluinをアクティブにします

完了:-)

（プロジェクトのsass設定を変更することを忘れないでください。sassの代わりにscssを使用している場合は、indentedSyntaxをfalseに設定してください）

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

gulp.task('sass', function() {
  gulp.src('app/styles/*.sass')
    .pipe(sass({
      includePaths: ['app/styles'],
      indentedSyntax : true,
      errLogToConsole: true
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(livereload());
});

gulp.task('serve', function(done) {
  var express = require('express');
  var app = express();
  app.use(express.static(__dirname + '/app'));
  app.listen(4000, function () {
     done();
  });
});

gulp.task('html', function() {
  gulp.src('app/**/*.html')
    .pipe(livereload());
});

gulp.task('watch', function() {
  gulp.watch('app/styles/*.sass', ['sass']);
  gulp.watch('app/**/*.html', ['html']);

  livereload.listen();
});

gulp.task('default', ['watch', 'serve']);
2
dreampulse

ブラウザ拡張機能を介してライブリロードを有効にしましたが、最後に行う必要があるのは、このボタンをクリックして個々のタブで「アクティブ化」することでした。 enter image description here

2
blomster

ブラウザプラグインを必要とせずにgulpとlivereloadを実行しました。

var http = require('http')
, path = require('path')
, Promise = Promise || require('es6-promise').Promise
, express = require('express')
, gulp = require('gulp')
, log = require('gulp-util').log
, tinylr = require('tiny-lr')
, livereload = require('gulp-livereload')

, ROOT = 'dist'
, GLOBS = [path.join(ROOT, "/**/*")]
, PORT = 8000
, PORT_LR = PORT + 1

, app = express()
;

app.use(require('connect-livereload')({port: PORT_LR}))
app.use('/', express.static("./dist"))

http.createServer(app).listen(PORT, function() {
  log("Started express server on http://localhost:" + PORT);
});

lrUp = new Promise(function(resolve, reject) {
  lrServer = tinylr()
  lrServer.listen(PORT_LR, function(err) {
    if (err) return reject(err)
    resolve(lrServer)
  })
})

gulp.watch(GLOBS, function(evt) {
  if (evt.type === 'deleted') return

  lrUp.then(function(lrServer) {
    log("LR: reloading", path.relative(ROOT, evt.path));
    gulp.src(evt.path).pipe(livereload(lrServer))
  })
  .catch(console.log)
});

楽しい ：）

1
markuz-gj