Search code examples
gruntjsgrunt-contrib-watchgruntfile

Grunt Watch not creating files on save


The tasks in my grunt file are running without errors but the files i'm asking it to create aren't being compiled. They are created if I simple run 'grunt' but if I use 'grunt watch' and save a file it doesn't update.

Particularly I am working on file 'script/src/latestNews.js' so on save this should concat with others to create 'script/dist/main.js', which it does. But it does not then go on to create 'dist/build.min.js' like it should.

module.exports = function (grunt) {

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

        uglify: {

            options: {
                mangle: false
            },

            target: {
                files: {
                    'script/dist/main.min.js':'script/dist/main.js'
                }
            },

            build: {
                files: {
                    'script/dist/build.min.js':'script/dist/build.min.js'  
                }
            }

        },

        concat: {
            options: {
                stripBanners: true,
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                '<%= grunt.template.today("yyyy-mm-dd") %> */',
            },

            srcJS: {
                src: ['script/src/menu.js',
                      'script/src/custom_plugins.js',
                      'script/src/banner.js',
                      'script/src/latestNews.js',
                      'script/src/officers.js',
                      'script/src/eventsCalendar.js',
                      'script/src/combinedSocialMedia.js',
                      'script/src/haveYourSay.js',
                      'script/src/photoGallery.js',
                      'script/src/countdown.js'
                     ],
                dest: 'script/dist/main.js'
            },

            css: {
                src: ['style/libs/bootstrap.min.css',
                      'style/libs/bootstrap-theme.min.css',
                      'style/src/css/*'],
                dest: 'style/dist/build.min.css'
            },

            build: {
                src: ['script/libs/jquery.easing.min.js',
                      'script/dist/main.js',
                      'script/libs/bootstrap.min.js',
                      'script/libs/velocity.min.js',
                      'script/libs/date.js',
                      'script/libs/jquery.timeago.js',
                      'script/libs/owl.carousel.min.js'
                      ],
                dest: 'script/dist/build.min.js'
            }

        },

        jshint: {

            main: 'script/dist/main.js'

        },

        watch: {

            js: {
                files: 'script/src/*',
                tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']
            },

            css: {
                files: 'style/src/css/*',
                tasks: ['copy:css']
            },

            less: {
                files: 'style/src/less/*',
                tasks: ['less', 'copy:css']
            },

            html: {
                files: '*.html',
                tasks: ['validation', 'bootlint']
            }

        },

        clean: {
            js: [
                'script/dist/main.min.js',
                'dist/build.min.js',
                'dist/build.min.css'
            ]
        },

        copy: {
            css: {
                files: [

                    { expand: true, 'src' : 'style/src/css/main.css',
                     'dest' : 'style/dist/', flatten: true,
                     rename: function(dest, src) {
                         return dest + src.replace('main','build.min');
                     }  
                    },

                    { expand: true, 'src' : 'style/dist/build.min.css',
                     'dest' : 'dist/', flatten: true },

                ]
            },

            js: {
                files: [
                    { expand: true, 'src' : 'script/dist/build.min.js',
                    'dest' : 'dist/', flatten: true }  
                ]
            }
        },

        validation: {
            options: {
                reset: grunt.option('reset') || false,
                stoponerror: true,
                relaxerror: ['Bad value X-UA-Compatible for attribute http-equiv on element meta.'] //ignores these errors
            },
            files: {
                src: ['homepage.html']
            }
        },

        bootlint: {
            options: {
                stoponerror: false,
                relaxerror: ['E001', 'E003', 'E031', 'W001', 'W002', 'W003', 'W005', 'W007', 'W009', 'E013']
            },
            files: ['homepage.html'],
        },

        less: {
            build: {
                options: {
                    paths: ["style/src/less"],
                    cleancss: true,
                    compress: true
                },
                files: {
                    "style/src/css/main.css": "style/src/less/main.less"   
                }
            }
        }

    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-html-validation');
    grunt.loadNpmTasks('grunt-bootlint');

    // Default task(s).
    //grunt.registerTask('default', ['concat:srcJS','concat:css','uglify','jshint:main']);
    grunt.registerTask('default', [
                                 'validation',
                                 'bootlint',
                                 'concat:srcJS',
                                 'jshint:main',
                                 'uglify:target', 
                                 'clean', 
                                 'concat:build',
                                 'uglify:build',
                                 'less',
                                 'copy'
                                ]);
    };

Solution

  • It looks like the array of tasks that are run by your watch:js task is simply missing a couple of critical tasks. Specifically you are not running the concat:build and uglify:build tasks.

    Your current array of tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'copy:js']

    Complete/fixed array of tasks: ['concat:srcJS', 'uglify:target', 'jshint:main', 'concat:build', 'uglify:build', 'copy:js']

    Replacing your current array with the fix that I supplied should solve your issue.