不同的 grunt watch 任务和触发事件

Question

我尝试使用两个监视任务，一个用于 html 和 css，它（应该）只触发重新加载（也不会发生），另一个由 .js 文件触发。在一个事件中，我尝试仅对更改的文件进行 uglify，然后连接所有 js 文件。它不起作用，无论哪个文件更改，所有 js 文件始终都是 uglifies。刚接触 Grunt，有人能抽出一两分钟吗？

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      files: {
        src: ['js/minified/jquery.min.js',
          'js/minified/jquery-migrate.min.js',
          'js/minified/jquery-ui-1.10.3.custom.min.js',
          'js/minified/jquery.imagesloaded.min.js',
          'js/minified/video.js',
          'js/minified/bigvideo.js',
          'js/minified/jquery.cycle.all.js',
          'js/minified/jquery.maximage.js',
          'js/minified/jquery.jfeed.js',
          'js/minified/moment.min.js',
          'js/minified/fastclick.js',
          'js/minified/cookies.min.js',
          'js/minified/jquery.hammer.min.js',
          'js/minified/index.js'
        ],
        dest: '<%= pkg.name %>.js'
      },
    },
    uglify: {
      files: {
        src: 'js/*.js', // source files mask
        dest: 'js/minified', // destination folder
        expand: true, // allow dynamic building
        flatten: true, // remove all unnecessary nesting
      }
    },
    jshint: {
      files: ['gruntfile.js', 'js/index.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      javascript: {
        files: ['js/*.js', 'gruntfile.js'],
        tasks: ['watchtask'],
        options: {
          nospawn: true,
        }
      },
      therest: {
        files: ['index.html', 'css/*.css'],
        tasks: []
      }
    },
    open: {
      dev: {
        path: 'http://127.0.0.1:8000'
      },
    },
    connect: {
      server: {
        options: {
          hostname: '*',
          port: 8000
        }
      }
    }
  });

  grunt.event.on('watch', function(action, filepath) {
    //change the source in the uglify task at run time so that it affects the changed file only
    grunt.config(['uglify', 'files', 'src'], filepath);
  });

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

  grunt.registerTask('default', ['jshint', 'uglify', 'concat', 'connect', 'open', 'watch']);
  grunt.registerTask('watchtask', ['jshint', 'uglify', 'concat']);

};

Answer 1

这是预期的行为。当watch:javascript 任务文件列表中的任何文件更改时，将执行关联的任务。你的 watchtask 运行 uglify 丑化了所有的 JS 代码。您需要为不同的 JS 文件指定单独的监视目标并单独的 uglify 目标来执行您的建议。

例如：

...
  uglify: {
    someTarget: {
      files: {
        src: 'js/file1.js', // source files mask
        dest: 'js/minified', // destination folder
        expand: true, // allow dynamic building
        flatten: true, // remove all unnecessary nesting
      }
    },
    otherTarget: {
      files: {
        src: 'js/file2.js', // source files mask
        dest: 'js/minified', // destination folder
        expand: true, // allow dynamic building
        flatten: true, // remove all unnecessary nesting
      }
    }
  },
  ...
  watch: {
    options: {
      livereload: true
    },
    javascriptOne: {
  files: ['js/file1.js'],
      tasks: ['uglify:someTarget'],
      options: {
        nospawn: true,
      }
    },
    javascriptTwo: {
      files: ['js/file2.js'],
      tasks: ['uglify:otherTarget'],
      options: {
        nospawn: true,
      }
    },
    ...
  },
...