Grunt Watch 没有运行 JS 或 CSS 的任务

Question

我不确定为什么我的 grunt-watch 没有针对 JS 或 CSS 配置运行

我的 Grunt 文件位于“工具”文件夹中。项目文件夹结构如下：

-index.html
-js
-css
-tools
--package.json
--node modules
--gruntfile.js

这是我的 CSS 文件夹结构：

-css
--src
---styles.css
---third-party
----bootstrap.css

这是我的 JS 文件夹结构：

-js
--src
---app.js
---third-party
----jquery.js

这是我的 package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "^0.6.1",
    "matchdep": "^0.3.0"
  }
}

这是我的 gruntfile，它是 watch 任务，似乎不起作用：

module.exports = function(grunt){

  //Loads the necessary tasks for this Grunt file.
  require('matchdep').filterDev('grunt-contrib-*').forEach(grunt.loadNpmTasks);

  // Project configuration
  grunt.initConfig({
    // Load package.json file so that access is given to the project name and version number.
    pkg: grunt.file.readJSON('package.json'),

    // Constants for the Gruntfile so we can easily change the path for our environments.
    //note: end with /
    BASE_PATH: '../',
    JS_SOURCE_PATH:     '../js/src/',
    JS_BUILD_PATH:      '../js/build/',
    CSS_SOURCE_PATH:    '../css/src/',
    CSS_BUILD_PATH:     '../css/build/',

    uglify: {
        files: {
            expand: true,
            cwd: '<%= JS_SOURCE_PATH %>',
            src: '**/*.js',
            dest: '<%= JS_BUILD_PATH %>',
            flatten: false,
        }
    },

    jshint: {
        options: {
            jshintrc: '<%= JS_SOURCE_PATH %>.jshintrc',
            force: true
        },
        all: [
                '<%= JS_SOURCE_PATH %>**/*.js',
                '!<%= JS_SOURCE_PATH %>third-party/**/*.js'
            ]
    },

    cssmin: {
        options: {
            keepBreaks: true,
            report: 'gzip'
        },
        minify: {
            expand: true,
            cwd: '<%= CSS_SOURCE_PATH %>',
            src: '**/*.css',
            dest: '<%= CSS_BUILD_PATH %>'
        }
    },

    watch: {
        options: {
            livereload: true,
            nospawn: true
        },
        js: {
            files: ['<%= JS_SOURCE_PATH %>**/*.js'],
            tasks: ['jshint']
        },
        css: {
            files: ['<%= CSS_SOURCE_PATH %>**/*.css'],
            tasks: ['cssmin']
        },
        html: {
            files: ['<%= BASE_PATH %>*.html']
        }
    }
  });


  grunt.registerTask('default', ['jshint', 'uglify', 'cssmin']);

  grunt.registerTask('doit', ['uglify', 'cssmin']);

  grunt.registerTask('css', ['cssmin']);

  grunt.registerTask('hint', ['jshint']);

};

编辑：这是我运行“grunt watch --verbose”时的输出

Running tasks: watch

Running "watch" task
Waiting...
Verifying property watch exists in config...OK
Verifying property watch.js.files exists in config...OK
Verifying property watch.css.files exists in config...OK
Verifying property watch.html.files exists in config...OK
Live reload server started on port: 35729
Watching ../js/src/app.js for changes.
Watching ../js/src/third-party for changes.
Watching ../js/src/third-party/jquery.js for changes.
Watching ../css/src/styles.css for changes.
Watching ../css/src/third-party for changes.
Watching ../css/src/third-party/bootstrap.css for changes.
Watching ../index.html for changes.
Watching ../css for changes.
Watching ../js for changes.
Watching  for changes.

Answer 1

我认为问题在于 gruntfile 的路径和位置。

你有这个：

    BASE_PATH: '../',
    JS_SOURCE_PATH:     '../js/src/',
    JS_BUILD_PATH:      '../js/build/',
    CSS_SOURCE_PATH:    '../css/src/',
    CSS_BUILD_PATH:     '../css/build/',

好像 gruntfile 不在根目录，而是在文件夹中。

Gruntfile（和 package.json、node_modules）需要在项目的根目录中才能正常工作。

如果你想改变它的pat，你可以设置两个参数--base和--gruntfile

尝试将 gruntfile 移动到项目的根目录并更改路径，如下所示：

    BASE_PATH: '',
    JS_SOURCE_PATH:     'js/src/',
    JS_BUILD_PATH:      'js/build/',
    CSS_SOURCE_PATH:    'css/src/',
    CSS_BUILD_PATH:     'css/build/',

从您的控制台启动后：

grunt watch