标签: livereload

我已经阅读了几 页关于Webpack中的热模块替换的内容.
甚至还有一个示例应用程序是使用它.

我已经阅读了所有这些,仍然没有得到这个想法.

我该怎么办？
它应该只用于开发而不是生产吗？
它是否像LiveReload,但你必须自己管理它？
WebpackDevServer是否以某种方式与它集成？

假设我想在将它们保存到磁盘时更新我的​​CSS(一个样式表)和JS模块,而无需重新加载页面而不使用LiveReload等插件.这是热模块更换可以帮助我吗？我需要做什么工作,HMR已经提供了什么？

我正在尝试使用grunt-contrib-livereload,但似乎无法弄明白.自述文件似乎跳过了我需要解释的所有内容,然后以我尝试它并且与文档似乎没有直接关系的示例结束.我在博客文章或教程或其他方面寻找了更好的解释,但一直未能找到.有人可以解释如何开始使用这个工具吗？

基于自述文件,我有以下几种问题:

文档说livereload任务"必须传递已更改的文件列表"---但是如何将这个文件列表传递给它？这个例子似乎没有说明这一点.regarde是否通过了清单？

是否需要grunt-contrib-connect？它做了什么,我该如何使用它？在尝试使用livereload之前,我是否需要学习连接？

自述文件提到中间件"必须是插入的第一个" - 但是在其他之前插入了什么？它是如何插入的？

而且我想我不明白我是如何操纵端口的."将重新加载监听livereload端口的所有浏览器"---但我如何知道哪个浏览器正在侦听哪个端口？在尝试使用livereload之前,是否需要了解所有端口？(关于如何最好地了解这一点的任何建议？)

最后,在该示例中,有一个folderMount函数似乎与以前的任何文档都没有关系.那是什么,我需要它吗？

我猜我在问是否有人可以取悦:

• 指向一个比当前自述文件更有效的教程;
• 解释自述文件的这些无法解释的部分,如果这些答案是我需要理解的插件;
• 或者提供一个功能性的例子,说明它为何起作用.

到目前为止,我已经完成了我想要的一切(这是监视我想要的所有文件并在有变化时刷新),除了我希望能够对Sass/CSS进行修改并让它刷新在没有页面加载的浏览器中.这不是什么大不了的事,但有时我会尝试修改某些页面交互之后的某些内容,如果页面刷新,我必须重新完成整个过程.

我相当确定这是可能的,但到目前为止我还没有.

这是我的Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      css: {
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
    }
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint'); …

我使用Cloud9 IDE,它只暴露端口80并阻止LiveReload连接.我收到此错误:

GET https://myapp.c9.io:35729/livereload.js?snipver=1 net :: ERR_CONNECTION_REFUSED

除非有人知道修复,否则我只想关闭/禁用它.

我正在运行Ember-cli,我可以在ember-cli/lib/tasks/serve.js中看到任务,我已经对它进行了评论,但它没有做到这一点:

/*
    var liveReloadServer = new LiveReloadServer({
      ui: this.ui,
      analytics: this.analytics,
      watcher: watcher
    });
*/

它被埋在足够的地方,我害怕npm删除它,因为我认为这只会产生更大的问题.

我知道你可以在Chrome开发者工具的Source面板中实时编辑JS,我知道有用于实时重新加载CSS的系统,但是你可以从源位置(URL或本地磁盘,重新加载JS)或以某种方式利用工作区,甚至可能作为Chrome开发者工具插件)？特别是这对于CoffeeScript-to-JS设置非常有用.

我正试图让我的头脑一直看着并编译一个无项目+ livereload.我有一个使用的style.less文件@import.当我运行gulp任务时,它似乎不理解导入.当我修改main less文件时,gulp编译文件并刷新浏览器,但如果我只修改导入,则忽略更改.

这是我的gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');

gulp.task('default', function() {
    return gulp.src('./style.less')
        .pipe(watch())
        .pipe(plumber())
        .pipe(less({
          paths: ['./', './overrides/']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest('./'))
        .pipe(livereload());
});

我尝试不指定主文件名,gulp.src('./*.less')但是所有较少的文件都是单独编译的.

谢谢

我目前正在Angular 4中开展一个项目,出于某种原因,当我在浏览器上预览应用程序时,我一直在经历随机重新加载.(我在prod模式下运行).遇到同样问题的人？找到任何解决方案 谢谢.

我试图设置我gulpfile.js在快速服务器上使用livereload没有太多运气.我看到那里的例子,但它们似乎与静态文件服务器有关.

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903 http://rhumaric.com/2014/01/livereload-magic-gulp-style/

所以我有一个app.js文件,它使用jade文件执行标准快速服务器等.我想要做的是让它与gulp.js启动中的livereload一起工作.

app.set('port', process.env.PORT || 3000);
    var server = app.listen(app.get('port'), function() {
    debug('Express server listening on port ' + server.address().port);
});

有很多类似的插件gulp-livereload,connect-livereload,gulp-connect,gulp-watch所以我怎么能得到这个连接好？

我正在使用Sublime Text 3并想使用LiveReload.我已安装Chrome浏览器插件.Node.js也已安装.

对于Sublime Text 3 Live Reload,必须安装此插件:https: //github.com/dz0ny/LiveReload-sublimetext2

如何在Windows 7上安装它？它只是说了一些关于Linux和OSX用户的内容.

我正在尝试启用Live Reload模式,但Dev Menu中没有这样的项目: