Grunt Watch no running task for JS or CSS

Question

I am not sure why my grunt-watch is not running for the JS or CSS configurations

My Grunt file is in a 'tools' folder. The project folder structure looks like this:

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

Here is my CSS folder structure:

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

Here is my JS folder structure:

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

Here is my 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"
  }
}

Here's my gruntfile, it is the watch task that does not seem to work:

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']);

};

Edit: Here is the output when I run '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

I think that the problem is path and the position of gruntfile.

You have this:

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

Seems that gruntfile isn't in the root directory but in a folder.

Gruntfile (and package.json, node_modules) need to be in the root of the project to work well.

If you would like to change its pat you can set two parameters --base and --gruntfile

Try to move gruntfile into the root of your project and change path like this:

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

After launch from your console:

grunt watch