我不确定为什么不为JS或CSS配置运行grunt-watch

我的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.

最佳答案

我认为问题是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

关于javascript - Grunt Watch没有正在运行的JS或CSS任务,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25081805/

10-11 05:35