React and Grunt - Envify NODE_ENV='production' and UglifyJS

Question

I am using Grunt to build a React project and I want to have 'dev' and 'prod' flavours. As react docs says:

To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.

I am very new using grunt, browserify and stuff but let's see. First problem I have is with envify, I use it as a transform:

browserify: {
  options: {
    transform: ['reactify'],
    extensions: ['.jsx']
  },
  dev:{
    options: {
      watch: true //Uses watchify (faster)
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  },
  /**
   * To use React in production mode, set the environment variable NODE_ENV to production.
   * A minifier that performs dead-code elimination such as UglifyJS is
   * recommended to completely remove the extra code present in development mode.
   **/
  prod: {
    options: {
     transform: ['envify'] //How to set up NOD_ENV='production' ?
    },
    src: ['js/app.js'],
    dest: 'js/bundle.js'
  }
},

Ok, doing grunt:dev works just fine. So when running grunt:prod... How can I set NODE_ENV: 'production'? I mean, I know I am passing 'envify' as a transform but... No idea how to use that.

After this, I also have an uglify task:

uglify: {
 prod: {
   files: {
     'js/bundle.min.js': ['js/bundle.js']
   }
 }
}

So after calling grunt:prod, what it creates is two files ( bundle.js and bundle-min.js ). In production I will like to only have bundle.min.js . I know I can do:

js/bundle.js': ['js/bundle.js']

But mmm I don't know if there is a way to just rename it to bundle.min.js, I guess so... the problem is that in the html I have:

<script src="js/bundle.js"></script>

Is there here also a trick to make it accepts either bundle.js or bundle.min.js?

Thanks in advance.

Answer 1

Transforms are local, and well made packages put their transforms in their package.json file. Unless you're using envify in your own code , you don't need to do anything with it.

What you do need is grunt-env , or another way to set environmental variables.

Here's an alternative by using package.json:

{
  "scripts": {
    "build": "NODE_ENV=development grunt build-dev",
    "dist": "NODE_ENV=production grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}

The benefit here is that the person using your package doesn't even need to install grunt globally. npm run build will run ./node_modules/.bin/grunt build-dev with the correct environmental variable set.

Answer 2

Both John Reilly's and FakeRainBrigand 's answers did not work for me. What worked for me was the following:

Step 1 - Run this command where your package.json is

npm i grunt-env --save-dev

Step 2 - Add the code in "evn:" to your Gruntfile.js within grunt.initConfig like so:

grunt.initConfig({

...

env: {
    prod: {
        NODE_ENV: 'production'
    }
},

...

});

Step 3 - Add the grunt task to your Gruntfile.js

grunt.loadNpmTasks('grunt-env');

Step 4 - Call it before browserify like so:

grunt.registerTask("default", ["env", "browserify"]);

Answer 3

Just an addition to the great answer by FakeRainBrigand, if you're running on Windows (like me) then you need a subtly different syntax in your scripts section:

{
  "scripts": {
    "build": "SET NODE_ENV=development&&grunt build-dev",
    "dist": "SET NODE_ENV=production&&grunt dist"
  }
},
"devDependencies": {
  "grunt": "...",
  "grunt-cli": "..."
}