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"
  }
}

这是我的grunt文件，它是看起来不起作用的监视任务：

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）需要在项目的根目录中才能正常工作。

如果您想更改其拍摄，可以设置两个参数--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

Grunt看不到JS或CSS的运行任务

1 个答案: