Rectangle 27 16

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.

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.

That's great! Thank you. About the last part of my question, any suggestion?

I'd always used grunt-env (works great!), but hadn't thought of the scripts in package.json approach. handy tip!

Have you actually confirmed that this works for React? I don't think React contains any transforms in package.json. I'm not sure that what you describe is enough to actually envify React.

The answer is right. This works for packages that specify browserify configuration in their package.json. React does that, but some ecosystem projects don't. When in doubt, check :-)

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 16

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.

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.

That's great! Thank you. About the last part of my question, any suggestion?

I'd always used grunt-env (works great!), but hadn't thought of the scripts in package.json approach. handy tip!

Have you actually confirmed that this works for React? I don't think React contains any transforms in package.json. I'm not sure that what you describe is enough to actually envify React.

The answer is right. This works for packages that specify browserify configuration in their package.json. React does that, but some ecosystem projects don't. When in doubt, check :-)

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 6

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

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'
    }
},

...

});
grunt.loadNpmTasks('grunt-env');
grunt.registerTask("default", ["env", "browserify"]);

Perfect - been struggling with this for a while and this solved it for me!

This was what worked for me too since I wasn't building my bundle using an npm task, but rather running grunt directly.

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 6

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

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'
    }
},

...

});
grunt.loadNpmTasks('grunt-env');
grunt.registerTask("default", ["env", "browserify"]);

Perfect - been struggling with this for a while and this solved it for me!

This was what worked for me too since I wasn't building my bundle using an npm task, but rather running grunt directly.

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 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": "..."
}

Or you could use npmjs.com/package/cross-env - so it's runnable on all systems (macOS, Windows, Linux).

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 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": "..."
}

Or you could use npmjs.com/package/cross-env - so it's runnable on all systems (macOS, Windows, Linux).

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 79

I know it might seem like a huge step but I would really recommend using grunt. It's really simple once you get the hang of it.

Here's a crash course:

Create a simple package.json file in the root of your project:

Once you have that, just type: npm install to the console (in the root of your project). This will install the necessary grunt plugins/dependencies (from the package file above).

Now create a simple gruntfile.js in the root of your project (it's a kind of config for your project):

// define source files and their destinations
    uglify: {
        files: { 
            src: 'js/*.js',  // source files mask
            dest: 'jsm/',    // destination folder
            expand: true,    // allow dynamic building
            flatten: true,   // remove all unnecessary nesting
            ext: '.min.js'   // replace .js to .min.js
        }
    },
    watch: {
        js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);

Once that's done you just need to build it. Type in the console:

or - better - if you type execute the command below - grunt will monitor your source files for changes, and if you change any of them - it will build them automatically:

You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.

Hi, thanks for you help but I do not see how this will work or solve my issue, I did all the steps and I get this :Running "watch" task waiting... ,I had to modify the code in "gruntfile.js" you have some errors in your code. I just want something to run at on time that can do what I want (as described above), thanks

Hi. Sorry for errors (lots of copy&paste). If you can see the "Running watch task..." that's great! just save your js file and grunt should build that. Or just use grunt command to build files once.

C:\npm>grunt --force Running "uglify:file1" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Running "uglify:my_plugins" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Done, but with warnings
uglify: {     tests: {          src: [ 'js/*.js' ], dest: 'jsm/tests.min.js'     } },

You can mark my answer as "answer" (to close the topic) and click the up arrow next to it :-) And I'm happy to help!

node.js - How to minify multiple Javascript files in a folder with Ugl...

node.js uglifyjs uglifyjs2
Rectangle 27 2

// <debug>
doSomething();
// </debug>

// <validation>
performSomeValidationOnlyNeededDuringDevelopment();
// </validation>
console.log()
debugger;

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Conditionally removing DEBUG during uglifyjs task on Grun...

javascript node.js gruntjs uglifyjs grunt-contrib-uglify
Rectangle 27 1

options: {
    compress: {
        warnings: false
    }
}
options: {
    compress: true
}

javascript - Suppress WARN statement from console in Grunt uglifyjs - ...

javascript node.js gruntjs uglifyjs
Rectangle 27 1

There appears to be a bug in grunt-contrib-uglify that only removes the global_defs from one file. I noticed DEBUG statements would be removed, as requested by options, if I reduced my files to one file

Did not work:

...
 files: {
          'yayMin.js' : [ ..., anotherfile.js, somefile.js, anotherfile2.js, ... ]
       }
 ...
...
files: {
          'yayMin.js' : [ somefile.js ]
       }
...
uglify: {
'build-minify' : {
        options: {
          mangle: false,
          compress: {
            global_defs: {
              DEBUG: false
            },
            dead_code: true
          },
          wrap: true
        },
        files : {
          'justSayNoToDebug.js' : [
            'ahHaveDebugsInMe.js'
          ]
        }
      },

javascript - Conditionally removing DEBUG during uglifyjs task on Grun...

javascript node.js gruntjs uglifyjs grunt-contrib-uglify
Rectangle 27 0

The Problem really seems to be the combination of uglify merged files and BOM. My current setup minifies each JS file but doesn't merge them anymore (there's no need to, as the Windows app will store all scripts locally so requests are not a problem). I'm adding the BOM to all of them at the end using the snippet from update 2 of my main post.

javascript - Grunt and UglifyJS in Windows app development - UTF8 prob...

javascript node.js encoding utf-8 gruntjs
Rectangle 27 0

It turns out the React bundle is coming from a badly bundled library I am using in my application: enabling source map in my uglify options allowed me to find this out easily.

javascript - UglifyJS seems to interfere with React dist used in produ...

javascript reactjs webpack uglifyjs create-react-app
Rectangle 27 0

I had a similar problem, though a lot of circumstances were diff't, so not sure if solution will work for you.

Uglify unescapes and converts \u0000 and other unicode chars in regexps to utf-8.

ascii-only=true
beautify=false
uglify

javascript - Grunt and UglifyJS in Windows app development - UTF8 prob...

javascript node.js encoding utf-8 gruntjs
Rectangle 27 0

My guess is that it is your Windows loading with the wrong charset. Did you set the charset in your html page so that it would force the browser to load it using UTF-8?

It seems to be a problem with how your files is being loaded instead of how they are generated/minified.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 </body>
</html>

Yup, the meta definition is present. I also got the right encoding now by manually adding the BOM to the files. The only problem remaining now is, that the app is only working when the debugger is present. If I open the packaged and installed app, I end at a white screen (all the app UI is built by the JS). If I debug that installed app, its running flawlessly

javascript - Grunt and UglifyJS in Windows app development - UTF8 prob...

javascript node.js encoding utf-8 gruntjs
Rectangle 27 0

options: {
    compress: {
        warnings: false
    }
}
options: {
    compress: true
}

javascript - Suppress WARN statement from console in Grunt uglifyjs - ...

javascript node.js gruntjs uglifyjs
Rectangle 27 0

There appears to be a bug in grunt-contrib-uglify that only removes the global_defs from one file. I noticed DEBUG statements would be removed, as requested by options, if I reduced my files to one file

Did not work:

...
 files: {
          'yayMin.js' : [ ..., anotherfile.js, somefile.js, anotherfile2.js, ... ]
       }
 ...
...
files: {
          'yayMin.js' : [ somefile.js ]
       }
...
uglify: {
'build-minify' : {
        options: {
          mangle: false,
          compress: {
            global_defs: {
              DEBUG: false
            },
            dead_code: true
          },
          wrap: true
        },
        files : {
          'justSayNoToDebug.js' : [
            'ahHaveDebugsInMe.js'
          ]
        }
      },

javascript - Conditionally removing DEBUG during uglifyjs task on Grun...

javascript node.js gruntjs uglifyjs grunt-contrib-uglify
Rectangle 27 0

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.

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.

That's great! Thank you. About the last part of my question, any suggestion?

I'd always used grunt-env (works great!), but hadn't thought of the scripts in package.json approach. handy tip!

javascript - React and Grunt - Envify NODE_ENV='production' and Uglify...

javascript node.js gruntjs reactjs browserify
Rectangle 27 0

I know it might seem like a huge step but I would really recommend using grunt. It's really simple once you get the hang of it.

Here's a crash course:

Create a simple package.json file in the root of your project:

Once you have that, just type: npm install to the console (in the root of your project). This will install the necessary grunt plugins/dependencies (from the package file above).

Now create a simple gruntfile.js in the root of your project (it's a kind of config for your project):

// define source files and their destinations
    uglify: {
        files: { 
            src: 'js/*.js',  // source files mask
            dest: 'jsm/',    // destination folder
            expand: true,    // allow dynamic building
            flatten: true,   // remove all unnecessary nesting
            ext: '.min.js'   // replace .js to .min.js
        }
    },
    watch: {
        js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);

Once that's done you just need to build it. Type in the console:

or - better - if you type execute the command below - grunt will monitor your source files for changes, and if you change any of them - it will build them automatically:

You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.

Hi, thanks for you help but I do not see how this will work or solve my issue, I did all the steps and I get this :Running "watch" task waiting... ,I had to modify the code in "gruntfile.js" you have some errors in your code. I just want something to run at on time that can do what I want (as described above), thanks

Hi. Sorry for errors (lots of copy&paste). If you can see the "Running watch task..." that's great! just save your js file and grunt should build that. Or just use grunt command to build files once.

C:\npm>grunt --force Running "uglify:file1" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Running "uglify:my_plugins" (uglify) task Warning: Uglification failed. Used --force, continuing. Warning: Cannot read property 'min' of undefined Used --force, continuing. Done, but with warnings
uglify: {     tests: {          src: [ 'js/*.js' ], dest: 'jsm/tests.min.js'     } },

You can mark my answer as "answer" (to close the topic) and click the up arrow next to it :-) And I'm happy to help!

node.js - How to minify multiple Javascript files in a folder with Ugl...

node.js uglifyjs uglifyjs2
Rectangle 27 0

// <debug>
doSomething();
// </debug>

// <validation>
performSomeValidationOnlyNeededDuringDevelopment();
// </validation>
console.log()
debugger;

javascript - Conditionally removing DEBUG during uglifyjs task on Grun...

javascript node.js gruntjs uglifyjs grunt-contrib-uglify
Rectangle 27 0

There is only some harmony support on the harmony branch of uglifyjs (which is still under development and not ready for production). As for UglifyJS v2.0...2.6.2 there is only support for pre-harmony/pre-es6 code.

It is not uglifyjs problem, it is webpack config problem, I wrote how can resolve it, but I want to know how to do it more automatically. Thank you for response.

I was able to use webpack and uglifyjs with ES6/ES2015 code using this solution: stackoverflow.com/a/40825182/882912

javascript - Pre build es6 npm modules with webpack in production conf...

javascript npm ecmascript-6 webpack uglifyjs