bundling all modules in cwd directory

[andrewc89]

When browserify is run, it bundles all of the modules found in the directory specified in cwd instead of just the ones required in the script.

Here is the relevant portion of my Gruntfile

module.exports = function (grunt) {

    var alias = require("browserify-alias-grunt");

    grunt.initConfig({

        // config level instances
        rootFolder: rootFolder,
        folder: grunt.option("folder"),
        subfolder: grunt.option("subfolder"),

        browserify: {
            options: {
                alias: alias.map(grunt, {
                    cwd: "../Assets/JS/modules",
                    src: ["**/*.js"],
                    dest: ""
                })
            },
            // bundles all JS files in dir, ignoring those in bundle dir
            default: {
                src: ["<%= rootFolder %>/<%= folder %>/<%= subfolder %>/**/*.js", "!<%= rootFolder %>/<%= folder %>/<%= subfolder %>/bundle/*.js"],
                dest: "<%= rootFolder %>/<%= folder %>/<%= subfolder %>/bundle/dev.js"
            },
        },

and here are the requires in my js file

$ = require("jquery");
require("block-ui");
var ko = require("knockout");
var resize = require("resize").resize;
var postList = require("jquery/jquery.ajax.postList");

The bundled file contains all of the modules found in the Assets/JS/modules directory.

[munkychop]

That's odd, as all the module does is create an array to be used with Browserify's alias option, so this could be intended behaviour of Browserify itself. I'll investigate this soon.

[andrewc89]

Yes, it doesn't make sense that they are being loaded. My Gruntfile is pretty crazy, so maybe there is a conflict somewhere.

Here is my Gruntfile. I am running the dev task.

https://gist.github.com/gwely/38918d9f451a48765e85

[munkychop]

Ok thanks. When I get a minute I'll create a simple Grunt build to test this and then if there is no issue I'll test again with your Gruntfile because, as you said, the problem could be some kind of conflict with your setup.

[andrewc89]

I am doing some debugging as well. Here is the result of my alias.map function:

["./../Assets/JS/modules/dateUtils.js:dateUtils",
"./../Assets/JS/modules/emailUtils.js:emailUtils",
"./../Assets/JS/modules/jquery/datepicker.js:jquery/datepicker",
"./../Assets/JS/modules/jquery/jquery.ajax.postList.js:jquery/jquery.ajax.postList",
"./../Assets/JS/modules/loadFileSiteFrame.js:loadFileSiteFrame",
"./../Assets/JS/modules/quicklinks.js:quicklinks",
"./../Assets/JS/modules/resize.js:resize",
"./../Assets/JS/modules/tableShader.js:tableShader",
"./../Assets/JS/modules/urlUtils.js:urlUtils"]

[munkychop]

I had a look and this is default behaviour of Browserify, so you'll need to be more specific with your alias mappings.

From the docs:

The alias option is just a shortcut to require a file and expose a different name for it.

https://github.com/jmreidy/grunt-browserify#alias

[munkychop]

@gwely in case you didn't know, you can exclude files/directories in the glob pattern for the src option of browserify-alias-grunt:

var alias = require('browserify-alias-grunt');

var aliasArray = alias.map(grunt, {
    cwd : 'src/js',
    src : ['**/*.js', '!some-file.js', '!some-dir'],
    dest : ''
});

[munkychop]

@gwely Also, if the alias setup is too much of a pain, then I recommend using the remapify module instead, which can be setup to do the same thing that browserify-alias-grunt was built to accomplish. If you'd like to see how to use it this way then take a look at the Browserify config in my Grunt project template.

Here's a (modified) excerpt, in case I change that stuff in the repo:

browserify : {

    dev: {
        src : 'src/js/main.js',
        dest : 'dist/js/main.js',
        options : {

            browserifyOptions : {
                debug: true,
                fullPaths: false
            },

            plugin: [
                [
                  'remapify', {
                      cwd: 'src/js', // defaults to process.cwd()
                      src: '**/*.js',
                      expose: ''
                    }
                ]
            ],

            watch: true // use watchify instead of grunt-contrib-watch (much much faster!).
        }
    },

    dist: {
        src : 'src/js/main.js',
        dest : 'dist/js/main.js',
        options : {

            browserifyOptions : {
                debug: false,
                fullPaths: false
            },

            plugin: [
                [
                  'remapify', {
                      cwd: 'src/js', // defaults to process.cwd()
                      src: '**/*.js',
                      expose: ''
                    }

                ],
                [
                    'minifyify', {
                        map: false,
                        uglify: {
                            compress: {
                                drop_console: true
                            }
                        }
                    }
                ]
            ]
        }
    }
},

Note that I am also using minifyify instead of Uglify, but you can remove this if you want.

I hope that's helpful.

[andrewc89]

I messed around with remapify but couldn't get it to work for me. I ended up using pathmodify:

var globalModulesDir = "../../../../Assets/JS/modules";

module.exports = function (grunt) {

    function browserifyConfigure(b) {
        b.plugin(pathmodify(), { mods: [pathmodify.mod.dir("assets", globalModulesDir)] });
    }

    grunt.initConfig({

        // config level instances
        rootFolder: rootFolder,
        folder: grunt.option("folder"),
        subfolder: grunt.option("subfolder"),

        browserify: {
            options: {
                configure: browserifyConfigure
            },
            // bundles all JS files in dir, ignoring those in bundle dir
            default: {
                src: ["<%= rootFolder %>/<%= folder %>/<%= subfolder %>/**/*.js", "!<%= rootFolder %>/<%= folder %>/<%= subfolder %>/bundle/*.js"],
                dest: "<%= rootFolder %>/<%= folder %>/<%= subfolder %>/bundle/dev.js"
            },
        },
.
.
.