metalsmith-uglify で JavaScript ファイルを最小化（minify）します。

インストール＆設定

例によって npm でインストールします。

$ npm install metalsmith-uglify --save
...
└─┬ metalsmith-uglify@2.3.0
...
$

index.js は 次のようになります。

const uglify = require('metalsmith-uglify');

Metalsmith(__dirname)

  ...

  .use(uglify({
    concat: {
      file: 'scripts.min.js',
      root: 'js/'
    },
    uglify: {
      sourceMap: false
    },
    removeOriginal: true
  }))

  ...

オプションについての説明です。

concat は JavaScript ファイルを連結して一つの .js ファイルを作るための指定です。連結後のファイルの出力先を root に、ファイル名を file に指定します。連結処理の際に、JavaScript ファイルの連結順序を指定したい場合は、files オプションを指定します（後述）。

uglify は最小化エンジンの UglifyJS に渡すパラメータです。ここでは、ソースマップを作らない設定にしています。

removeOriginal は最小化前の .js ファイルを build ディレクトリに出力したくないときに使います。

他にもいくつかオプションがありますが、デフォルトのままで問題ないと思います。

読み込み順序を指定する場合

jquery を使用する場合などが典型例ですが、JavaScript ファイルの読み込み順序を指定したいときがあります。

例えば、次のような JavaScript ファイルを用意し、以下のツリーに書かれている順に読み込みたいとします。

• src/
• posts/
• css/
• js/
• jquery.js
• first.js
• second.js

files の指定は、次のようになります。files の指定は、src からの相対パスという点を押さえておけば大丈夫です。

  ...

  .use(uglify({
    concat: {
      file: 'scripts.min.js',
      root: 'js/'
    },
    files: [
      'js/jquery.js',
      'js/first.js',
      'js/second.js'
    ],
    uglify: {
      sourceMap: false
    },
    removeOriginal: true
  }))

  ...