将 grunt 与浏览器刷新一起使用

Question

我目前正在使用 browser-refresh 每次更改我的服务器文件时重新启动我的节点服务器。我想更进一步，每次我对 HTML 文件进行更改时，我的浏览器都会 refresh/reload。我正在为客户端使用车把，所以我的 views 目录中有 .hbs 个文件。我以为 browser-refresh 应该也能刷新浏览器，但它对我不起作用。

对于 grunt，我安装了以下任务：

grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-express-runner');

我认为我不需要所有这些，但我想找到有用的东西。我可以用 grunt-exec 重新启动我的服务器，但我已经有了 browser-refresh 的别名，所以我真的不需要那个。

我还应该注意，在我的 app.js 服务器文件中，我使用 app.use('/', routes);，其中 var routes = require('./routes/index');。因此，当我的应用加载时（使用 node app.js），它会直接转到 http://localhost:3000/users/login.

提前致谢。

Answer 1

将 grunt-contrib-watch and setting the Live reload 选项设置为 true，将启用实时重新加载和 grunt 自动重建。

例如，在您的 gruntfile.js:

watch: {
  css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: true,
    },
  },
},

要重建您的站点，（使用 grunt-contrib-watch 插件），只需键入

grunt watch

要根据更改自动重建您的网站，请查看下面 grunt watch 命令的示例用法：

gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({

    exec: {
      server: 'node server'
    },

    // Other JS tasks here
    // ...


    watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass'],
        options: {
          spawn: false
        }
      },

      javascript: {
        files: ['js/*.js'],
        tasks: ['uglify']
      },

      options: {
        livereload: true,
      },

    },

  });

  grunt.registerTask('server', ['exec:server']);

  // Minify JS and create CSS files
  grunt.registerTask('build', ['uglify', 'sass']);

  // Do what you expect the default task to do
  grunt.registerTask('default', ['build', 'exec:server']);
};

更多信息在这里：https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html

将 grunt 与浏览器刷新一起使用

Use grunt with browser-refresh

node.js

browser-refresh

express

gruntjs