Search code examples
gruntjswatchgruntfile

grunt watch task is not watching js files just says waiting


I have been trying to configure this gruntfile for days, I have seen and read multiple documents on how to set it up. I have been able to set it up so I can run individual tasks by typing in the individual commands into bash:

grunt uglify grunt sass grunt cssmin

However grunt watch seems to not watch any of my js files

All of which work fine, but when I tried to run them all under the "watch" task, my js files are all ignored. my command line just reads 'waiting...'. Changing any of the content in my js files does not trigger an update. I also had toruble running jshint as it kept telling me that it is looking for a string etc. so i disabled that plugin for now. Here is my file:

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: { // Task 
      dist: { // Target        
        files: { // Dictionary of files 
          'assets/css/style.css': 'assets/scss/style.scss'
          // 'destination': 'source' 

        }
      }
    },

    cssmin: {
      options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") 
      %> \n*/\n'
      },
      build: {
        files: {
          'assets/css/style.min.css': 'assets/css/style.css'
        }
      }
    },
    uglify: {
      options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") 
      %> \n*/\n'
      },
      build: {
        files: {
          'assets/js/magic.min.js': ['assets/js/magic.js', 
           'assets/js/server.js', 'assets/js/script.js']
        }
      }
    },
    // configure jshint to validate js files -------------------------------
    // jshint: {
    //   options: {
    //     reporter: require('jshint-stylish')  

    //   },

    //   // when this task is run, lint the Gruntfile and all js files in 
    src
    //   build: ['Gruntfile.js', 'assets/**/*.js']
    // },


    watch: {

      // for stylesheets, watch css and less files 
      // only run less and cssmin stylesheets: { 
      files: ['assets/**/*.css', 'assets/**/*.less'],
      tasks: ['sass', 'cssmin']
    },

    // for scripts, run jshint and uglify 
    scripts: {
      files: 'assets/**/*.js',
      tasks: 'uglify'
    }
  });
  // Default tasks
  //grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-concurrent');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['uglify', 'cssmin', 'sass', 'watch']);
};

Solution

  • I think you want to do this ?

    watch: {
        stylesheets: { 
          files: ['assets/**/*.css', 'assets/**/*.less'],
          tasks: ['sass', 'cssmin']
        },
    
        // for scripts, run jshint and uglify 
        scripts: {
          files: 'assets/**/*.js',
          tasks: 'uglify'
        }
      }