How do you add browserify to a yeoman project?

browserify, gruntjs, javascript, unit-testing, yeoman

Solution

Here's what I did:

- `npm install grunt-browserify --save-dev`

- `npm install coffeeify --save-dev`

Add grunt-browserify step in `Gruntfile.js`:

browserify: {
    basic: {
        src: ['<%= yeoman.app %>/scripts/**/*.js', '<%= yeoman.app %>/scripts/**/*.coffee'],
        options: {
            transform: ['coffeeify']
        },
        dest: '.tmp/scripts/application.js'
    }
}

Add step to concurrent/watch steps, e.g.:

concurrent: {
    server: [
        '...',
        'browserify'
    ],
    dist: [
        '...',
        'browserify'
    ]
}

watch: {
    coffee: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
        tasks: ['...', 'browserify']
    }
}

Modify default app/index.html template, so usemin will concatenate and minify, from this:

<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

<!-- build:js(.tmp) scripts/coffee.js -->
<script src="scripts/hello.js"></script>
<!-- endbuild -->

To this:

    <!-- build:js({.tmp,app}) scripts/main.js -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="scripts/application.js"></script>
    <!-- endbuild -->

Problem

I would like to use browserify instead of RequireJS for my Yeoman project. Can you please tell me how to swap this out so my app/ and test/ can take advantage of module.exports and require()?

Original source