Tips and tricks

Use Browserify Globally as Watcher in PhpStorm

First, we need to install browserify globally

Open terminal and say

sudo npm install -g browserify@16.5.0 @babel/core@^7 @babel/plugin-transform-runtime@^7

Make sure that in Program you may have

/usr/local/lib/node_modules/browserify/bin/cmd.js

Then in Arguments

$FilePath$
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

Then in Output paths to refresh

dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map

optional:

You could extend with babelify

tutorial here

Remember to set in Program argument ( if using PhpStorm ):

/usr/local/lib/node_modules/browserify/bin/cmd.js

You could extend with minifyify

npm i -g minifyify@7.3.5

Then you can just do:

$FilePath$
-d
-p
[/usr/local/lib/node_modules/minifyify/lib/index.js
--map
$FileNameWithoutAllExtensions$.js.map
--output
$FileNameWithoutAllExtensions$.js.map
]
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

make sure to name your files

file.source.js
sudo npm install -g browserify @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @babel/preset-react core-js minifyify babelify
{"type":"main_options","images_arr":"'#ffffff'","enable_ajax":"off","soundcloud_apikey":"","bg_isparallax":"off","bg_slideshow_time":"0","bg_transition":"slidedown","site_url":"https:\/\/digitalzoomstudio.net","theme_url":"https:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","blur_ammount":"26","width_column":"50","width_section_bg":"","width_gap":"30","border_width":"0","border_color":"#ffffff","translate_cancel_comment":"Cancel reply","translate_leave_a_comment":"Leave a comment","translate_leave_a_comment_to":"Leave a comment to","is_customize_preview":"off","width_blur_margin":"30","gallery_w_thumbs_autoplay_videos":"off","content_enviroment_opacity":"30","menu_enviroment_opacity":"70","base_url":"https:\/\/digitalzoomstudio.net"}
{"type":"darkfull"}