I'm porting some JavaScript from Jekyll to Gulp.
In Jekyll, I have a _config.yml file that includes environment variables like this:
# _config.yml
app_url: https://app.mysite.com
dev_mode: true
dev_app_url: https://devapp.local
...and in the JS source, I can use Liquid to determine if I'm in dev_mode and modify what gets outputted e.g.:
// main.js
var appUrl = '{% if site.dev_mode %}{{ site.dev_app_url }}{% else %}{{ site.app_url }}{% endif %}';
{% if site.dev_mode %}
console.log(someVar);
//etc
{% endif %}
Is there a way to do similar things when using Gulp, so I can have different environment vars in my JS when I'm developing and have blocks of debugging code that will be omitted when I compile for production?
I think you should think about using nodejs environment variables. Can be easily set on your package.json script definition if using npm. So you could end up with something similar to that :
package.json :
{
"name": "whatever",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"devDependencies": {
"gulp": "^4.0.2",
},
"scripts": {
"build": "export NODE_ENV=dev||set NODE_ENV=dev&& gulp build",
},
"repository": {
//...
}
}
And within your gulp build task (because that is where the node env was define in your package.json), you can now validate the nodejs env :
if (process.env.NODE_ENV == "dev")
{
//stuff()
}