javascript - 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