Question

我有一个用Coffeescript编写的应用程序。我的grunt.js文件看起来像这样：

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    clean: {
      test: {
        files: [{
          src: ['.tmp']
        }]
      }
    },
    coffee: {
      compileScripts: {
        expand: true,
        flatten: true,
        src: '*/*.coffee',
        dest: '.tmp/scripts',
        ext: '.js'
      },
    },
    jst: {
      compile: {
        files: {
          '.tmp/scripts/templates.js': ['scripts/**/*.ejs']
        }
      }
    },
    watch: {
      all: {
        options: {
          livereload: true,
          spawn: false
        },
        files: ['scripts/*.coffee', 'scripts/*.ejs', 'index.html'],
        tasks: ['compile'],
      }
    },
    connect: {
      server: {
        options: {
          port: 8000,
          hostname: 'localhost',
          open: true,
          livereload: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-jst');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('compile', ['clean', 'coffee', 'jst']);
  grunt.registerTask('default', ['compile', 'connect', 'watch']);
}

经过多次修补，我终于得到了“观看”。在我的JS文件正在重新加载的地方工作，但是我不清楚文件中的内容是什么＆＃39;部分手表任务？我做得对吗？

我是否只需要观看coffeescript文件？或者我还必须查看index.html，以便如果其中一个coffeescript文件发生更改，index.html将刷新并重新加载新的JS？（我的所有JS文件都是我的index.html中的脚本。）

Answer 1

监视任务的files属性包含要监视的文件模式列表，并在更改时执行某些操作（最常见的是运行某些任务）。

tasks属性包含您在更改相应files时要运行的任务。

任何配置了livereload选项的目标都会在files更改为实时重新加载服务器时提供。{1}}。因此，如果您有*.coffee个文件，则会在更改后将其提供给实时重新加载服务器。实时重装服务器只知道如何解释js，css文件，以便.coffee文件刷新整个页面，而不仅仅是javascript。

tasks属性对于watch任务是可选的，因此更好地配置实时重新加载的常见解决方案是：

watch: {
  options: { spawn: false },
  all: {
    files: ['scripts/*.coffee', 'scripts/*.ejs'],
    tasks: ['compile'],
  },
  livereload: {
    options: { livereload: true },
    files: ['.tmp/**/*.{html,js,css}']
  }
},

因此，当您的compile任务运行时，它会触发watch:livereload目标并通过提供正确的文件进行实时重新加载。

关于index.html，在您的实例中，您可能不需要在watch:all目标中观看该文件。因为它没有任何构建它的任务（至少从我上面看到的配置）。

想要重新加载Javascript文件时要使用grunt-contrib-watch观看哪些文件？

1 个答案: