CODEWITHSUNDEEP
javascriptgruntjsgrunt-contrib-watch
joep
joep

Reputation: 258

grunt watch not compiling all sass files despite being "watched"

Basically at the moment I have 2 issues that I can't seem to find answers to. When I save my main styles.scss, sass compiles ok, though when I save either _globals.scss or any other scss file, grunt watch seems to detect the change, but it doesn't compile! What would I need to do to rectify this?

My 2nd issue is when I have got a scss file in a directory within the scss folder for example: pages/_gallery.scss (which is being imported in the main styles.scss), grunt watch doesn't see it, I understand this is because of probably because of my cwd path, though how do I make this more generic?

Here is my Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

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

    watch: {
      scripts: {
        files: ['public/resources/site/js/*.js'],
        tasks: ['newer:jshint', 'newer:uglify:dist'],
        options: {
          spawn: false,
          livereload: true,
        },
      },
      sass: {
        files: ['public/resources/site/scss/*.scss'],
        tasks: ['newer:sass:app'],
        options: {
          livereload: true
        }
      },
      php:{
          files: ['public/index.php'],
          options: {
            livereload: true
          }
      }
    },
    sass: {
      app: {
        files: [{
          expand: true,
          cwd: 'public/resources/site/scss/',
          src: ['*.scss'],
          dest: 'public/resources/site/css/',
          ext: '.css'
        }]
      },
      options: {
        sourceMap: true,
        outputStyle: 'compressed'
      }
    },
    uglify: {
      dist: {
        options: {
          sourceMap: true,
          mangle: true
        },
        files: [{
          expand: true,
          cwd: 'public/resources/site/js/',
          src: ['*.js'],
          dest: 'public/resources/site/js/',
          ext: '.min.js'
        }]
      }
    },
    jshint: {
      options: {
        force: true
      },
      files: [
          'public/resources/site/js/*.js',
          '!public/resources/site/js/*.min.js'
      ]
    },
    notify: {
      watch: {
        options: {
          title: 'Tasks Complete',
          message: 'Files Processed & Compiled',
        }
      }
    }
  });

  // Load tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-newer');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-notify');

  // Default task(s).
  grunt.registerTask('default', []);

  grunt.task.run('notify_hooks');

};

Upvotes: 1

Views: 789

Answers (1)

Jivings
Jivings

Reputation: 23262

To make subdirectories work you need a globbing pattern;

'public/resources/site/scss/**/*.scss'

I think that your watch task is flawed due to newer. Watch detects a change to _globals, but the sass task knows only to compile the main styles.scss. However, newer sees that this file has not changed, so it does not run the step.

Try removing newer from the watch task list.

Upvotes: 1

Related Questions