grunt-browserify aliasMapping two levels deep

Question

So I have a directory of files where two of the files are immediately inside the folder:

views/view1.js
views/view2.js

But one is nested a level deeper

views/other/view3.js

I want to compile these with grunt-browserify using an alias mapping so I can require them as:

require('view1')

require('view2')

require('other/view3')

So I setup the simple mapping in the grunt-browserify config:

{
  expand: true,
  cwd: 'views/',
  src: ['**/*.js'],
  dest: ''
}

The first two files require() fine, but the last one can't be found. The alias mapping I'm using is only looking a single level deep. How can I get it to go down every level I give it?

Answer 1

The whole aliasMappings option seems broken because I can't even get their mapping example to work out properly. I found another solution that uses aliasify (kudos to byronwong for this code). This is how my working Gruntfile looks like:

var util = require('util');
var aliasify = require('aliasify');

module.exports = function(grunt) {

  // takes grunt-browserify aliasMappings config and converts it into an aliasify config.
  function configureAliasify(aliasMappings) {
    var expandedAliases = {};
    aliases = util.isArray(aliasMappings) ? aliasMappings : [aliasMappings];
    aliases.forEach(function (alias) {
      grunt.file.expandMapping(alias.src, alias.dest, {cwd: alias.cwd}).forEach(function(file) {
        var expose = file.dest.substr(0, file.dest.lastIndexOf('.'));
        expandedAliases[expose] = './' + file.src[0];
      });
    });

    return require('aliasify').configure({
      aliases: expandedAliases
    });
  }

  // Create alias mappings with aliasify
  var aliasMappings = configureAliasify({
    cwd: 'views',
    src: ['**/*.js'],
    dest: ''
  });

  // Project configuration.
  grunt.initConfig({
    browserify: {
      dist: {
        files: {
          'build/app.js': ['client/entry.js']
        },
        options: {
          debug: true,
          transform: [aliasMappings]
        }
      }
    }
  });

  // Load the plugin that provides the "browserify" task.
  grunt.loadNpmTasks('grunt-browserify');

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

};

The client/entry.js file now can require all the files that exist in the views directory as aliases.

Note that while the above solution works, aliasify is no longer maintained in favor for tagify. However, tagify is fundamentally different to aliasify so not really sure how a solution using that lib instead would look like.

Update: After some more fiddling I realized that it's not necessary to use aliasify or tagify. What is needed is basically a mapping function that takes aliasMapping and returns a alias array. This is more or less what grunt-browserify should do with an aliasMapping, but for some reason it isn't working. This is what I ended up with:

var util = require('util');

module.exports = function(grunt) {

  // Takes grunt-browserify aliasMappings config and converts it into an alias array
  function aliasMappingsToAliasArray(aliasMappings) {
    var aliasArray = [];
    aliases = util.isArray(aliasMappings) ? aliasMappings : [aliasMappings];
    aliases.forEach(function (alias) {
      grunt.file.expandMapping(alias.src, alias.dest, {cwd: alias.cwd}).forEach(function(file) {
        var expose = file.dest.substr(0, file.dest.lastIndexOf('.'));
        aliasArray.push('./' + file.src[0] + ':' + expose);
      });
    });
    return aliasArray;
  }

  // Project configuration.
  grunt.initConfig({
    browserify: {
      dist: {
        files: {
            'build/app.js': ['client/entry.js']
        },
        options: {
          debug: true,
          alias: aliasMappingsToAliasArray({
            cwd: 'shared',
            src: ['**/*.js'],
            dest: ''
          })
        }
      }
    }
  });

  // Load the plugin that provides the "browserify" task.
  grunt.loadNpmTasks('grunt-browserify');

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

};

Answer 2

That aliasMapping configuration is now working as expected in v2 beta.

You can install it with npm install grunt-browserify@2