Grunt - 合并多个JS文件并监测变化

Question

我在Grunt方面还是有些新手，所以请在回答时考虑到这一点。我正在尝试在Grunt中设置一个任务，将名为“custom”的目录中的所有JS文件合并成一个名为custom-concat.js的单个文件，但是在运行grunt watch之后（没有错误地运行），当我尝试更改“custom”目录中的任何文件时，什么也没有发生（即使在“custom”目录内的任何JS文件发生更改后，控制台仍然显示“等待...”）。显然，我的concat任务存在问题，但我似乎看不到问题所在。有人能看出问题所在吗？下面是完整的gruntfile：

module.exports = function(grunt) {

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

    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['scripts/custom/**/*.js'],
        dest: 'scripts/custom-concat.js',
      },
    },

    uglify: {
      build: {
        src: 'scripts/custom-concat.js',
        dest: 'scripts/custom.min.js'
      }
    },

    less: {
      options: {
        paths: ["css"]
      },
      files: {
        "styles.css": "less/styles.less"
      }
    },

    watch: {
      scripts: {
          files: 'scripts/**/*.js',
          task: ['concat', 'uglify:build']
      },

      styles: {
          files: 'css/less/**.less',
          task: 'less'
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task(s).
  grunt.registerTask('default', ['concat', 'uglify']);

};

- wickywills

Answer 1

据我所见，您的观察任务存在三个小问题：

1. watch 的正确属性是 taskS 而不是 task
2. 如果您想要在一开始直接运行 watch 任务，请使用 options { atBegin: true }
3. 您的 watch 任务监视脚本文件夹。但是，这个文件夹也将包含您的合并和压缩文件。因此，此任务将陷入无限循环。您可能只需要监视 scripts/custom 文件夹。

因此，您的 watch 任务应该像这样：

watch: {
  scripts: {
      files: 'scripts/custom/**/*.js',
      tasks: ['concat', 'uglify:build'],
      options: {
          atBegin: true
      }
  },

  styles: ...
}

Github grunt-contrib-watch

- Syjin

---

嘿，我应该只是复制并粘贴这个答案……很多人都在这里输入“任务”。 - Jordan Kasper

我遵循的教程中提到了“task” - 鉴于我是Grunt的新手，我永远不会想到这一点，因为我本来以为该教程已经经过测试了 - 显然没有！谢谢 - 这可行 :) - wickywills