web-dev-qa-db-ja.com

NodeでJSファイルを連結および縮小する

NodeJSにJavaScriptファイルを連結および縮小するモジュールはありますか？

javascriptnode.jsminify
46
TIMEX

Connectを使用している場合は、 Connect-Assetmanager で幸運に恵まれています。

24
Edward M Smith

glifyJS を使用することをお勧めします。これはNodeJS用のJavaScriptパーサー/マングラー/コンプレッサー/美化ライブラリです。

ファイルを単純に連結および縮小する以上のことを行う自動化ツールに興味がある場合は、次の解決策があります。

  • GruntJS は、JavaScriptプロジェクト用のタスクベースのコマンドラインビルドツールです。現在のバージョンには、次の組み込みタスクがあります。

    1. concat-ファイルを連結します。
    2. init-定義済みのテンプレートからプロジェクトの足場を生成します。
    3. lint- JSHint でファイルを検証します。
    4. min- glifyJS でファイルを縮小します。
    5. qunit-ヘッドレス PhantomJS インスタンスで QUnit 単体テストを実行します。
    6. server-静的Webサーバーを起動します。

このタスクに加えて、多くの plugins が利用可能です。

  • Gulp は、開発ワークフローで苦痛または時間のかかるタスクを自動化するのに役立つツールキットです。 Web開発の場合（それがあなたの目的であれば）、CSSプリプロセス、JSトランスパイル、ミニファイ、ライブリロードなどを行うことで役立ちます。統合はすべての主要なIDEに組み込まれており、人々はPHP、.NET、Node.js、Javaなどのあらゆるものを愛しています。 1700を超えるプラグイン（およびプラグインを使用せずにできること）があれば、gulpを使用すると、ビルドシステムをいじって終了して仕事に戻ることができます。

  • Yeoman は、開発者が美しく魅力的なWebアプリを迅速に構築するのに役立つ、堅牢で意見のあるツール、ライブラリ、およびワークフローのセットです。

    1. 超高速の足場-カスタマイズ可能なテンプレート（たとえば、 HTML5ボイラープレート 、 Twitterブートストラップ ）、AMD（ RequireJS 経由）などを使用して、新しいプロジェクトを簡単に足場できます。
    2. CoffeeScriptとCompassの自動コンパイル- LiveReload 監視プロセスは、ソースファイルを自動的にコンパイルし、変更が行われるたびにブラウザーを更新するため、必要はありません。
    3. スクリプトを自動的にリントする-すべてのスクリプトは jshint に対して自動的に実行され、言語のベストプラクティスに従っていることを確認します。
    4. 組み込みのプレビューサーバー-独自のHTTPサーバーを起動する必要はありません。組み込みのコマンドは、1つのコマンドで起動できます。
    5. 素晴らしい画像の最適化- OptiPNG とJPEGTranを使用してすべての画像を最適化し、ユーザーがアセットをダウンロードする時間を短縮し、アプリを使用する時間を長くできるようにします。
    6. AppCacheマニフェストの生成-アプリケーションキャッシュマニフェストを生成します。プロジェクトを構築してブームを起こすだけです。無料で入手できます。
    7. キラービルドプロセス-縮小と連結だけでなく、また、すべての画像ファイルHTMLを最適化し、 CoffeeScript および Compass ファイルをコンパイルし、アプリケーションキャッシュマニフェストを生成します。AMDを使用している場合は、これらのモジュールはr.jsを使用するため、必要はありません。
    8. 統合パッケージ管理-依存関係が必要ですか？キーを押すだけです。コマンドラインを介して新しいパッケージを簡単に検索できるようにします（例：yeoman search jquery ）。ブラウザを開かなくても、それらをインストールして最新の状態に保つことができます。
    9. ES6モジュール構文のサポート-最新のECMAScript 6モジュール構文を使用してモジュールを作成してみてください。これは実験的な機能であり、ES5に再コンパイルされるため、最新のすべてのブラウザーでコードを使用できます。
    10. PhantomJS単体テスト- PhantomJS を使用して、ヘッドレスWebKitで単体テストを簡単に実行できます。新しいアプリケーションを作成するときに、アプリケーションのテスト用の足場も含めます。
58
Diogo Cardoso

glifyJS はNode javascriptの最小化に関するモジュールです。ファイルを結合することもありませんが、見逃したオプションがあるかもしれません。

Edit：glifyJS 2 では、連結も組み込まれています。

ノードアプリでこのインラインを実行したい場合、それは本当に簡単です。これにより、うなり声やヨーマンの方法を使用せずに、実行時に縮小/連結されたjsスクリプトを動的に生成できます。

npm install uglify-js

そしてあなたのモジュールで：

var fs = require('fs');
var uglify = require("uglify-js");

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']);

fs.writeFile('concat.min.js', uglified.code, function (err){
  if(err) {
    console.log(err);
  } else {
    console.log("Script generated and saved:", 'concat.min.js');
  }      
});
29
Joel Mueller

Gulp/webpackのようなものを使用して、アセットを連結/整理/バンドルする方が良いでしょう。

Jsファイルに参加するには、Twitterで行ったようにbootstrap makefile

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

これは、jsファイルへの出力を持つファイルの単なる連結です

次に、uglify-jsをインストールしてjsを縮小できます。

npm -g install uglify-js

そして、次のコマンドをpath/file.js ofcで実行します。

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

Uglifyjs 2以降のコメントで述べたように、次のこともできます。

uglifyjs --compress --mangle -- input.js
13
Jeflopo

Grunt用のこれら2つのプラグインを試してください

https://www.npmjs.org/package/grunt-contrib-concat

https://www.npmjs.org/package/grunt-contrib-uglify

必要なものはすべてインストールできます：

npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify

次に、次のようにgruntファイルを作成します。

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    concat: {
      options: {
        process: function(src, path){
          return '\n/* Source: ' + path + ' */\n' + src;
        }
      },
      src: [
        '../src/**/*.js'
      ],
      dest: '../bin/app-debug.js'
    },
    uglify: {
      src: '../bin/app-debug.js',
      dest: '../bin/app.js'
    },
    watch: {
      options: {
        atBegin: true,
        event: ['all']
      },
      src: {
        files: '../src/**/*.js',
        tasks: ['concat']
      },
      dist: {
        files: '../bin/app-debug.js',
        tasks: ['uglify']
      },
    }
  }

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('default', ['watch']);
}

最後に、ターミナルでgruntと入力すると、GruntはJavaScriptファイルの変更を監視し始め、自動的にそれらを連結してUGL化します（../src/のjsファイルに変更を保存するたびに）

2
Trevor

Rails 3.1アセットパイプラインアプローチが好きな場合は、私の connect-assets ライブラリを試してください。

2
Trevor Burnham

たぶんあなたが探しているものではないかもしれませんが、 Enderjs は動作します。

1
johnmdonahue

Closure Compilerのシンプルモードをお勧めします。

1
Stephen Chung

既にuglify-js、コードは最新の ES6機能（ECMAScript 2015） の一部を使用し、最初の実行時に解析エラーを返した後、uglify-es：

npm install uglify-es -g

または：

npm install mishoo/UglifyJS2#harmony

説明は glify-js-es6パッケージ にあります：

これは、uglifyjsの 'harmony'ブランチ （ glifyJS2 ）の最新リリースを含む一時パッケージです。

uglifyjsコマンドを使用して、通常どおり実行できます。圧縮とマングルの例：

uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js

これにより、フォルダのすべてのJSファイルを含む単一のファイルが生成されます。二重ダッシュ（--）は、入力ファイルがオプション引数として使用されるのを防ぐだけです。

0
CPHPython