Search code examples
javascriptgruntjsgrunt-contrib-watchgrunt-contrib-concatgrunt-contrib-uglify

Grunt Does Not Watch JS files


I have been spending over an hour on this one, looked through several questions, but the answer is nowhere to be found.

I am running into a problem when using watch on my javascript files. All of the other files are watched and the tasks are executed properly.

If I run the default from the start, concat and uglify are working perfectly fine, but if I make any changes to a js file, watch will just plainly ignore it.

This is my file:

module.exports = function(grunt) {

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

        concat: {
            index: {
                src: ['js/shared/*.js', 'js/index/*.js'],
                dest: 'js/concat/index.js',
            },
            page: {
                src: ['js/shared/*.js', 'js/page/*.js'],
                dest: 'js/concat/page.js',
            },
        },

        uglify: {
            dist: {
                files:{
                    'js/build/index.min.js': 'js/concat/index.js',
                    'js/build/page.min.js': 'js/concat/page.js',
                }
            }
        },

        sass: {
            options: {
                outputStyle: 'compressed',
            },
            dist: {
                files: {
                    'css/main-unprefixed.css': 'sass/main.scss'
                }
            }
        },

        autoprefixer: {
            global: {
                src: 'css/main-unprefixed.css',
                dest: 'css/main.css'
            }
        },

        jade: {
            compile: {
                options: {
                    pretty: true
                },
                files: [{
                    expand: true,
                    cwd: '',
                    src: [ '_layouts/jade/*.jade' ],
                    dest: '_layouts',
                    flatten: true,
                    ext: '.html'
                }]
            }
        },

        shell: {
            jekyllServe: {
                command: "jekyll serve --no-watch"
            },
            jekyllBuild: {
                command: "jekyll build"
            }
        },

        open : {
            build: {
                path: 'http://localhost:4000',
                app: 'Firefox'
            }
        },

        watch: {
            options: {
                livereload: true
            },
            site: {
                files: ["*.html", "**/*.html", "*.md", "**/*.md", "**/*.yml", "*.yml", "!_site/*.*", "!_site/**/*.*"],
                tasks: ["shell:jekyllBuild"]
            },
            scripts: {
                files: ["js/*.js", "js/**/*.js"],
                tasks: ["concat", "uglify", "shell:jekyllBuild"]
            },
            jade: {
                files: ["_layouts/jade/*.jade"],
                tasks: ["jade"]
            },
            css: {
                files: ["sass/*.scss", "sass/**/*.scss", "sass/**/**/*.scss"],
                tasks: ["sass", "autoprefixer", "shell:jekyllBuild"]
            }
        }
    });


    require('load-grunt-tasks')(grunt);

    // Default task(s).
    grunt.registerTask("serve", ["shell:jekyllServe"]);
    grunt.registerTask("default", ["open", "concat", "uglify", "sass", "autoprefixer", "jade", "shell:jekyllBuild", "watch"]);
};

Any help is highly appreciated.


Solution

  • The issue lays within your site method, in the watch task.

    If you remove these, it should work:

    "!_site/*.*", "!_site/**/*.*"
    

    Grunt doesn't seem to like the underscores inline with the !.

    I'm not sure how to workaround this whilst keeping the underscore, but you could always rename the directory to be site or dist, instead of _site.