Grunt - 连接多个 JS 文件并观察变化

Question

Grunt 还是个新手，所以请在回答时牢记这一点。我正在尝试在 Grunt 中设置一个任务，它将一个名为 "custom" 的目录中的任何 JS 文件连接到一个名为 custom-concat.js 的文件中，但是在运行 grunt watch 之后（它运行良好且没有错误)，当我尝试对 "custom" 目录中的任何文件进行更改时，没有任何反应（即即使我对 "custom" 中的任何 JS 文件进行了更改，控制台也只是位于 "waiting...."目录）。显然我的 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']);

};

Answer 1

据我了解，你的watch任务存在三个小问题：

watch 的正确属性是 taskS 而不是 task
如果要运行监视任务，直接在开头，使用options { atBegin: true }
您的监视任务监视脚本文件夹。但是，此文件夹还将包含您的合并和丑化文件。所以这个任务会运行陷入死循环。你应该只看 scripts/custom 文件夹

所以你的 watch 任务应该看起来像这样：

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

  styles: ...
}

Github grunt-contrib-watch

Grunt - 连接多个 JS 文件并观察变化

Grunt - Concat multiple JS files and watch for changes

javascript

node.js

gruntjs