javascript - How can I configure uglifyjs from package.json - Stack Overflow

admin管理员组

文章数量:1345327

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

Share Improve this question Follow edited Jul 22, 2015 at 13:35 JasonC asked Jul 21, 2015 at 17:10 JasonCJasonC 31344 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签： javascriptHow can I configure uglifyjs from packagejsonStack Overflow