Grunt browserify + uglify + newer

[fooman]

I am kinda lost here. I thought it’d be fairly easy to make this happen but I guess I’m missing a key point.

I am trying to use Browserify, along with Uglify. I use newer to trigger it all because I run jsHint first (whereas without it I could use browserify’s watchify or something… yes?).

Anywho, I digress.
The issue I’m seeing is that browserify/uglify run multiple times on the same file. As I allow the watch task to run, it makes more and more of the same bundle everytime I save a file.

My Gruntfile is as follows:

module.exports = function(grunt) {

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

        // ===================================
        //  JSHINT
        // ===================================
        jshint: {
            options: {
                reporter: require('jshint-stylish'), // use jshint-stylish to make our errors look and read good
                sub: true
            },
            files: ['src/js/**/*.js']
        },

        // ===================================
        //  BROWSERIFY
        // ===================================
        browserify: {
            options: {
                watch: true,
                browserifyOptions: {
                    debug: true
                }
            },
            dist: {
                files: [{
                    expand: true,       // Enable dynamic expansion.
                    cwd: 'src/',        // Src matches are relative to this path.
                    src: ['js/**/*.js', '!js/shared/**/*.js'],  // Actual pattern(s) to match.
                    dest: 'dist/',      // Destination path prefix.
                    ext: '-min.js',     // Dest filepaths will have this extension.
                    extDot: 'first'     // Extensions in filenames begin after the first dot
                }]
            }
        },

        // ===================================
        //  UGLIFY
        // ===================================
        uglify: {
            options: {
                sourceMap: function (path) {
                    return path.replace(/js\/build\/(.*).min.js/, "$1.map.js");
                },
                sourceMappingURL: function (path) {
                    return path.replace(/js\/build\/(.*).min.js/, "../../$1.map.js");
                },
                banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            // // Specific mappings that uglify specific files
            // static_mappings : {
            //  files : [
            //      {
            //          src: ['dist/js/libs/jquery-selectit/jquery-selectit.js', 'src/js/ThumbnailViewer.js', 'src/js/Products.js'],
            //          dest: 'dist/js/Products-min.js'
            //      },
            //      {
            //          src: 'src/js/PageSetup.js',
            //          dest: 'dist/js/PageSetup-min.js'
            //      }
            //  ]
            // },
            // Dynamic mappings that will uglify whatever else matches
            dynamic_mappings: {
                files: [{
                    expand: true,       // Enable dynamic expansion.
                    cwd: 'dist/',       // Src matches are relative to this path.
                    src: ['**/*.js', '!js/libs/**/*.js'],   // Actual pattern(s) to match.
                    dest: 'dist/',      // Destination path prefix.
                    ext: '.js',         // Dest filepaths will have this extension.
                    extDot: 'first'     // Extensions in filenames begin after the first dot
                }]
            }
        },

        // ===================================
        //  SASS
        // ===================================
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'dist/css/main.css': 'src/scss/main.scss'
                }
            }
        },

        // ===================================
        //  AUTOPREFIXER
        // ===================================
        autoprefixer: {
            options: {
                browsers: ['last 8 versions', 'ie 8', 'ie 9'],
                map: true
            },
            dist: {
                files: {
                    'dist/css/main.css': 'dist/css/main.css'
                }
            }
        },

        // ===================================
        //  HANDLEBARS
        // ===================================
        handlebars: {
             options: {

                // configure a namespace for your templates
                namespace: 'ECommerce.Templates',

                // convert file path into a function name
                // in this example, I convert grab just the filename without the extension 
                processName: function(filePath) {
                    var pieces = filePath.split('/');
                    return pieces[pieces.length - 1].split('.')[0];
                }
            },
            compile: {
                files: {
                    "dist/handlebars-templates/templates.js": "src/handlebars-templates/**/*.hbs"
                }
            }
        },

        // ===================================
        //  WATCH
        // ===================================
        watch: {
            js: {
                files: ['src/js/**/*.js'],
                tasks: ['newer:jshint', 'newer:browserify', 'alldone', 'newer:uglify', 'alldone']
            },
            sass: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass', 'autoprefixer']
            },
            handlebars: {
                files: ['src/handlebars-templates/**/*.hbs'],
                tasks: ['handlebars']
            },
            options: {
                nospawn: true
            }
        }
    });

    grunt.registerTask('alldone', function() {
        grunt.log.writeln('Done Task');
    });

    // Load plugins
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-newer');

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

I’d assume that it’d run jshint, browserify, uglify anytime a JS file is updated. It does this for the first few saves and then I see it happen multiple times on each save.

Here is the last time “watch” was triggered. Note how the same bundle was updated twice and created twice at the very end. Is this expected? Is this happening because I’m using newer along with Browserify’s watch: true option (which is watchify unless I read incorrectly)?

>> File "src/js/admin/AdminCategoryEdit.js" changed.

Running "newer:jshint" (newer) task

Running "newer:jshint:files" (newer) task

Running "jshint:files" (jshint) task

✔ No problems


Running "newer-postrun:jshint:files:13:/project/node_modules/grunt-newer/.cache" (newer-postrun) task

Running "newer:browserify" (newer) task

Running "newer:browserify:dist" (newer) task

Running "browserify:dist" (browserify) task
>> /project/src/js/admin/AdminCategoryEdit.js changed, updating bundle.
>> /project/src/js/admin/AdminCategoryEdit.js changed, updating bundle.
>> Bundle dist/js/admin/AdminCategoryEdit-min.js created.

Running "newer-postrun:browserify:dist:14:/project/node_modules/grunt-newer/.cache" (newer-postrun) task

Running "alldone" task
Done Task

Running "newer:uglify" (newer) task

Running "newer:uglify:dynamic_mappings" (newer) task

Running "uglify:dynamic_mappings" (uglify) task
File dist/js/admin/AdminCategoryEdit-min.js.map created (source map).
File dist/js/admin/AdminCategoryEdit-min.js created: 2.24 MB → 347.71 kB
>> 1 sourcemap created.
>> 1 file created.

Running "newer-postrun:uglify:dynamic_mappings:15:/project/node_modules/grunt-newer/.cache" (newer-postrun) task

Running "alldone" task
Done Task

Running "watch" task
Completed in 3.972s at Mon Mar 28 2016 11:45:52 GMT-0400 (EDT) - Waiting...
>> Bundle dist/js/admin/AdminCategoryEdit-min.js created.
>> Bundle dist/js/admin/AdminCategoryEdit-min.js created.

[Author]

Posts