Grunt watch is not detecting the changes made to the files after the first task is run

Question

I have a simple Gruntfile configured to run sass, then autoprefix (postcss), and finally cssmin. It's supposed to run the tasks in that order after detecting a change in a scss file and the consequent changes (after running sass) in the resulting css file. However, it is only running the sass task. Here is my gruntfile:

module.exports = function(grunt) {

  grunt.initConfig({

    watch: {
      sass: {
        files: 'dev/scss/**/*.scss', 
        tasks: ['sass']
      },
      autoprefix: {
        files: 'dist/css/main.css',
        tasks: ['postcss']
      },
      cssmin: {
        files: 'dist/css/main-prefixed.css',
        tasks: ['cssmin']
      },
      js_concat: {
        files: 'dev/scripts/**/*.js',
        tasks: ['concat']
      },
      js_uglify: {
        files: 'dist/scripts/built.js',
        tasks: ['uglify']
      }
    },

    sass: {
      dev: {
        files: {
          'dist/css/main.css' : 'dev/scss/main.scss'
        }
      }
    },

    cssmin: {
      build: {
        src: 'dist/css/main-prefixed.css',
        dest: 'dist/css/main.min.css'
      }    
    },

    postcss: {
      options: {
        map: true,
        processors: [
          require('autoprefixer')({browsers: ['last 2 versions']})
        ]
      },
      dist: {
        src: 'dist/css/main.css',
        dest: 'dist/css/main-prefixed.css'
      }
    },

    concat: {
      options: {
        separator: '\n\n\n'
      },
      dist: {
        src: ['dev/scripts/*.js'],
        dest: 'dist/scripts/built.js'
      }
    },

    uglify: {
      build: {
        files: {
          'dist/scripts/built.min.js': ['dist/scripts/built.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);

};

And this is the file structure:

Gruntfile.js
dev/
  |__ scss/
        |__ (all scss partials and main.scss file)
dist/
  |__ css/
        |__ main.css
        |__ main-prefixed.css
        |__ main.min.css

When I run the tasks manually it works without problem.

What might be the issue here?

RanM RanM · Accepted Answer · 2018-03-19T10:46:50

No sure why you're getting these results, but you can try to solve it by configuring your watch task a bit different. If you detect a change in your scss files, just run the chain of commands one after the other (instead of relying on watch to see the resulted change of each task and act):

watch: {
  sass: {
    files: 'dev/scss/**/*.scss', 
    tasks: ['sass', 'postcss', 'cssmin'] // This will run the 3 tasks one after the other.
  },
  js_concat: {
    files: 'dev/scripts/**/*.js',
    tasks: ['concat']
  },
  js_uglify: {
    files: 'dist/scripts/built.js',
    tasks: ['uglify']
  }
},

Grunt watch is not detecting the changes made to the files after the first task is run

1 Answers