How can I configure uglifyjs from package.json

Question

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,
        "compress": true
      }
    }
  ]
}

Schnapp

Answer 1

If your build script is a node script, you can use Uglify's JavaScript API instead of the command-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

Bans

Thanks, I may give this one a try, though writing my own build build script starts to eat away at the whole point of avoiding Grunt etc. It does have the benefit of being more platform-independent than my current method, though. – Schnapp

Yeah, but that's why so many of us do use Grunt. Despite feeling heavy and verbose, it overcomes the limitations of package.json, gives us cross-platform file globbing, etc. In a follow-up to the blog post you linked, the author admits Unix-style globbing doesn't work on Windows, and yet his npm scripts use it extensively.blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool – Bans

I do link to that post as well in my question, and I take your point. I do find it strange though that no-one has used uglify directly with package.json though, in the way that I'm after. – Schnapp

Sorry, my mistake, I didn't see that you had linked both posts. – Bans

Answer 2

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

Paschal

Yes, but I'd like to include the configuration for it in package.json too - e.g. something like an array of js files to concat / minify. – Schnapp

Why not specify the files by path uglify lib/* ? – Paschal

I'm not sure I follow you. If you mean specifying a glob in the scripts object, then I'd like to order the files explicitly. – Schnapp

Answer 3

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 incomplete, when somebody asks this type of question they likely need a complete 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.com/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"
command = "zola build && npm run uglify"

[build.environment]
ZOLA_VERSION = "0.16.0"

[context.deploy-preview]
command = "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.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"

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

Forster