Grunt-Browserify Ignore Option

Question

I have a React app that I am transforming, uglifying and browserfying via Grunt. My grunt file looks like this...

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    browserify: {
        dist: {
            files: {
                './Scripts/build/App.js': ['./Scripts/src/**/*.js']
            },
            options: {
                browserifyOptions: {
                    debug: true
                },
                transform: [ require('grunt-react').browserify ],
                ignore: './Scripts/src/**/*-test.js'
            }
        }
    },
    uglify: {
        my_target: {
            files: {
                './Scripts/build/App-min.js': ['./Scripts/build/App.js']
            }
        }
    },
    watch: {
        scripts: {
            files: ['./Scripts/src/**/*.js'],
            tasks: ['browserify', 'uglify'],
            options: {
                spawn: false
            },
        },
    },

})

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}

You will notice the ignore property of the browserify task is telling it to ignore any file with -test.js in the filename, the reason being that my tests are stored in folders directly next to the file I am testing (as seems to be the convention when looking at the React Flux examples) and I don't want the test files being bundled in to my app.js file. Can anyone tell me if I am doing this wrong because so far it doesnt seem to be working at all? The test files get bundled into app.js and then I get console errors about jest not being defined.

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Did a bit of lateral Googling and found a post on stack Here

It seems that you can add files to the src array and if you prefix them with a '!' it marks them as ignored files.

My now working grunt file....

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    browserify: {
        dist: {
            files: {
                './Scripts/build/App.js': ['./Scripts/src/**/*.js', '!./Scripts/src/**/*-test.js']
            },
            options: {
                browserifyOptions: {
                    debug: true
                },
                transform: [ require('grunt-react').browserify ]
            }
        }
    },
    uglify: {
        my_target: {
            files: {
                './Scripts/build/App-min.js': ['./Scripts/build/App.js']
            }
        }
    },
    jest: {
        options: {
            coverage: true,
            testPathPattern: /.*-test.js/
        }
    },
    watch: {
        scripts: {
            files: ['./Scripts/src/**/*.js'],
            tasks: ['browserify', 'uglify'],
            options: {
                spawn: false
            },
        },
    },

})

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-jest');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
}

your approach solved my issue but there is a problem with the exclude/ignore. I posted to an existing thread about it here: https://github.com/jmreidy/grunt-browserify/issues/348 — ekkis, Feb 12 '16 at 03:02
@ekkis glad it worked for you, I ended up moving away from grunt and browserify and now use gulp and webpack instead as it suited our needs better — bencrinkle, Feb 12 '16 at 09:43
it's been a steep learning curve for me with grunt/browserify/karma/mocha/chai. how do you like gulp/webpack? I've been curious and at some point I should look into them — ekkis, Feb 15 '16 at 20:38
really like gulp and webpack it allowed us to add more complexity to our build process, gulp is code over configuration so you can write your own custom tasks — bencrinkle, Feb 17 '16 at 09:26

Grunt-Browserify Ignore Option

1 Answers1