我已经开始学习Flask来开发Web应用程序。我真正想念的是 任何
代码更改（包括静态文件，模板等）之后，浏览器都会自动刷新。这似乎是几乎所有Javascript框架中的标准功能。前端人员对此有以下几个术语：自动重新加载/刷新，热重新加载/刷新（hotreload），实时重新加载/刷新（livereload），…

J只是想要一个简单的浏览器刷新。

我用谷歌搜索并尝试了几件事-没有运气：

• https://github.com/lepture/python-livereload
• https://gist.github.com/amontalenti/8922609

我如何才能在使用Flask时获得平稳的开发体验，而不必每天在浏览器中按F5键1000次才能查看更改结果？

我认为答案python-livereload离上面的链接很近。所以我想我的问题的替代标题可能是：

有人有Flask + python-livereload的有效示例吗？

我很傻，从他们的文档中获取它:)

编辑：为了完整起见，这里是我正在使用的Flask应用程序。

# filename: main.py

from flask import Flask,render_template
from livereload import Server



app = Flask(__name__)

@app.route('/')
def index():
    return "INDEX"

@app.route('/bart')
def use_jinja():
    return render_template('basic.html')



if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve(port=5555)

我以以下方式启动应用

python main.py

到现在为止还挺好。

任何人都知道，所有的javascript文件都是在第一次访问时加载的。或者，有些文件在需要时以懒模式加载。

到现在为止还挺好…

情况是：服务器更新所有文件(html partials，javascripts，css)，客户端仍然有很多文件过时。

这将简单地解决刷新浏览器，点击F5键，控制f5或浏览器中的刷新按钮。但是，在使用SPA时，这个概念不存在。

我不知道如何解决这个问题。

我可以以某种方式检测(做一个ping可能)，只是重新加载该特定的文件。使用document.write策略。但是现在又出现了一个问题，我有一个单一的javascript文件，所有的javascript都被缩小了。

我可以尝试在浏览器中强制重新加载，或强制重新登录(并重新加载，因为登录是SPA部分)。

但重新加载是一个难看的解决方案，想像客户端丢失所有数据的形式，因为他是不幸的服务器刚刚更新。更糟的是，我现在必须创建一些“自动保存”功能，因为这样。

我不知道如何处理这个，如果可能的话，以“有角度的方式”做。

我不知道谷歌Gmail如何处理这个，因为我保持登录了很多小时没有登录。

我建议使用一些构建工具，如gulp，grunt或webpack，最后一个变得越来越受欢迎。

到目前为止，我使用gulp作为我的项目。我正在移动到webpack

如果您对gulp感兴趣，您可以查看gulp-rev和gulp-rev-replace插件。

他们在做什么？

让我们说我们在你的项目app.js中有下一个文件，将gulp-rev应用到你的项目之后你得到的是像app-4j8888dp.js那样的app.js注入的html文件仍然指向app.js，所以你需要更换它。为此，您可以使用gulp-rev-replace插件。

例如。 gulp任务在哪里

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

gulp.task("index",function() {
  var jsFilter = filter("**/*.js",{ restore: true });
  var cssFilter = filter("**/*.css",{ restore: true });
  var indexHtmlFilter = filter(['**/*','!**/index.html'],{ restore: true });

  return gulp.src("src/index.html")
    .pipe(useref())      // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(indexHtmlFilter)
    .pipe(rev())                // Rename the concatenated files (but not index.html)
    .pipe(indexHtmlFilter.restore)
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('public'));
});

如果您想了解更多详情，请参阅下面的链接。

https://github.com/sindresorhus/gulp-rev
https://github.com/jamesknelson/gulp-rev-replace

<configuration>
  <system.web>
    <sessionState cookieless="UseCookies" timeout="1440" mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424"/>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Design,Version=4.0.0.0,Culture=neutral,PublicKeyToken=xxx"/>
        <add assembly="System.Web.Extensions.Design,PublicKeyToken=xxx"/>
        <add assembly="System.Windows.Forms,PublicKeyToken=xxx"/>
      </assemblies>
    </compilation>
    <authentication mode="Windows"/>
    <pages>
      <controls>
        <add tagPrefix="ajaxtoolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolKit"/>
      </controls>
    </pages>
  </system.web>
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="50000000"/>
      </webServices>
    </scripting>
  </system.web.extensions>
</configuration>

解决方法

// Stop Caching in IE
Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache);

// Stop Caching in Firefox
Response.Cache.SetNoStore();

解决方法

/.../
var watchr = require('watchr');
watchr.watch({
    paths: [__dirname],listeners: {
        change: function() {
            // Emits an event to all connected clients 
            io.sockets.emit('browserReload');
        }
    }
})

/.../
  socket.on('browserReload',function () {
     // Reload without using cache
     document.location.reload(true);
  });