How do you add browserify to a yeoman project?

Question

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()?

Answer 1

Here's what I did:

1. npm install grunt-browserify --save-dev
2. npm install coffeeify --save-dev

3. 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'
       }
   }
   

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

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

5. 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 -->