title: Sails.js with React.js, how to do it correctly?
body: <p>I want to integrate React.js + browserify in my Sails.js-application.</p>
  
  <p>For this I use a grunt-plugin <a href="https://www.npmjs.com/package/grunt-react" rel="nofollow noreferrer">grunt-react</a>.</p>
  
  <p>I created a file <code>/tasks/config/browserify.js</code></p>
  
  <pre><code>module.exports = function(grunt) {
  
    grunt.config.set('browserify', {
      //dev: {
        options:      {
          transform:  [ require('grunt-react').browserify ],
          extension: 'jsx'
        },
        app:          {
          src:        'assets/jsx/app.jsx',
          dest:       '.tmp/public/js/app.js'
        }
      //}
    });
  
    grunt.loadNpmTasks('grunt-browserify');
  };
  </code></pre>
  
  <p>Then I added a line in <code>compileAssets.js</code> and <code>syncAssets.js</code>:</p>
  
  <pre><code>// compileAssets.js
  
  module.exports = function (grunt) {
      grunt.registerTask('compileAssets', [
          'clean:dev',
          'stylus:dev',
          'browserify',   // &lt;&lt;&lt; this added
          'copy:dev'
      ]);
  };
  </code></pre>
  
  <p>and </p>
  
  <pre><code>// syncAssets.js
  
  module.exports = function (grunt) {
      grunt.registerTask('syncAssets', [
          'stylus:dev',
          'browserify',   // &lt;&lt;&lt; this added
          'sync:dev'
      ]);
  };
  </code></pre>
  
  <p>Then i modified a line in <code>copy.js</code>.</p>
  
  <pre><code>// copy.js
  
  module.exports = function(grunt) {
  
      grunt.config.set('copy', {
          dev: {
              files: [{
                  expand: true,
                  cwd: './assets',
                  src: ['**/*.!(styl|jsx)'],   /// &lt;&lt;&lt; this modified
                  dest: '.tmp/public'
              }]
          },
          build: {
              files: [{
                  expand: true,
                  cwd: '.tmp/public',
                  src: ['**/*'],
                  dest: 'www'
              }]
          }
      });
  
      grunt.loadNpmTasks('grunt-contrib-copy');
  };
  </code></pre>
  
  <p><strong>And it worked!</strong></p>
  
  <p>But I think I did not do it quite right.</p>
  
  <p>If i uncommented line <code>dev: {</code> and <code>}</code> in <code>/tasks/config/browserify.js</code> like this:</p>
  
  <pre><code>module.exports = function(grunt) {
  
    grunt.config.set('browserify', {
      dev: {                           /// &lt;&lt;&lt; this uncommented
        options:      {
          transform:  [ require('grunt-react').browserify ],
          extension: 'jsx'
        },
        app:          {
          src:        'assets/jsx/app.jsx',
          dest:       '.tmp/public/js/app.js'
        }
      }                           /// &lt;&lt;&lt; this uncommented
    });
  
    grunt.loadNpmTasks('grunt-browserify');
  };
  </code></pre>
  
  <p>And if I make changes in <code>compileAssets.js</code> and <code>syncAssets.js</code>:</p>
  
  <pre><code>// compileAssets.js
  
  module.exports = function (grunt) {
      grunt.registerTask('compileAssets', [
          'clean:dev',
          'stylus:dev',
          'browserify:dev',   // &lt;&lt;&lt; this added :dev
          'copy:dev'
      ]);
  };
  </code></pre>
  
  <p>and </p>
  
  <pre><code>// syncAssets.js
  
  module.exports = function (grunt) {
      grunt.registerTask('syncAssets', [
          'stylus:dev',
          'browserify:dev',   // &lt;&lt;&lt; this added :dev
          'sync:dev'
      ]);
  };
  </code></pre>
  
  <p><strong>it does not work!</strong></p>
  
  <p>Is it worth worrying about it?</p>
  
  <p>And why is it not working when I add <code>browserify: dev</code> in <code>compileAssets.js</code> and <code>syncAssets.js</code> files?</p>