Currently, when developing Wordpress themes I use a simple batch file to uglify my js. An example batch file makebundle.bat

call uglifyjs^
  src/file1.js^
  src/file2.js^
  -cmo bundle.min.js

I then use watch to build it like this

watch makebundle src

All very simple. Now, I'd like to make this a less Windows-specific process. For the reasons outlined here I don't want to use Grunt / Gulp, and was thinking of trying to use npm as a build tool. The only trouble is, I can't find out how to configure uglifyjs from within package.json

edit

Here's an example of something I'd like to work in package.json:

{
  "uglifyConfig": [
    {
      "outfile": "bundle.min.js,
      "files": [
        "src/file1.js",
        "src/file2.js"
      ]
      "config": {
        "mangle": true,
        "press": true
      }
    }
  ]
}

Currently, when developing Wordpress themes I use a simple batch file to uglify my js. An example batch file makebundle.bat

call uglifyjs^
  src/file1.js^
  src/file2.js^
  -cmo bundle.min.js

I then use watch to build it like this

watch makebundle src

All very simple. Now, I'd like to make this a less Windows-specific process. For the reasons outlined here I don't want to use Grunt / Gulp, and was thinking of trying to use npm as a build tool. The only trouble is, I can't find out how to configure uglifyjs from within package.json

edit

Here's an example of something I'd like to work in package.json:

{
  "uglifyConfig": [
    {
      "outfile": "bundle.min.js,
      "files": [
        "src/file1.js",
        "src/file2.js"
      ]
      "config": {
        "mangle": true,
        "press": true
      }
    }
  ]
}

• javascript
• node.js
• watch
• uglifyjs
• package.json

3 Answers 3

If your build script is a node script, you can use Uglify's JavaScript API instead of the mand-line API. You can easily require() your package.json, read configuration from it, and pass those values to Uglify.

package.json:

{
  ...
  "scripts": {
    "ugly": "node do-uglify.js"
  }
  ...
}

do-uglify.js:

var uglify = require('uglify');
var package = require('./package.json');
var uglifyConfig = package.uglifyConfig;
// Call the UglifyJS Javascript API, passing config from uglifyConfig

You can put any scripts you want in the "scripts" section of package.json.

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "ugly": "uglify",
    "prepublish" : "uglify"
  },
...

You can give it any arbitrary name and run it with npm run ugly or use one of the predefined hooks such as prepublish

I was looking to do the exact same thing today and this is the most relevant and number one hit on google.

The example by Gangstead is correct but inplete, when somebody asks this type of question they likely need a plete answer, and possibly even some context and explanation.

Here is the full solution:

package.json:

{
  "name": "abridge-bundle",
  "version": "1.1.0",
  "description": "Abridge - bundle and minify js",
  "author": "Jake G <[email protected]>",
  "license": "MIT",
  "homepage": "https://github./Jieiku/abridge",
  "scripts": {
    "uglify": "uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -c -m -o static/search_bundle.min.js"
  },
  "dependencies": {
    "uglify-js": "^3.15.4"
  }
}

The above package.json file can be used to generate minified js file by typing npm run uglify.

In my case I deploy to netlify, so here is the netlify.toml as well:

[build]
publish = "public"
mand = "zola build && npm run uglify"

[build.environment]
ZOLA_VERSION = "0.16.0"

[context.deploy-preview]
mand = "zola build --base-url $DEPLOY_PRIME_URL && npm run uglify"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=63072000; includeSubdomains"
    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.; frame-src 'self' www.youtube-nocookie. player.vimeo.; media-src 'self' data: cdn.cloudflare. www.youtube-nocookie. player.vimeo.; font-src 'self' cdn.cloudflare. cdn.jsdelivr fonts.gstatic.; style-src 'self' 'unsafe-inline' cdn.cloudflare. cdn.jsdelivr fonts.googleapis.;"

These are currently viewable at my repository as well (zola static site generator theme): https://github./Jieiku/abridge