nodeのarchiverを使用してzipファイルをzipで圧縮したい

Question

node.jsのモジュールのarchiverを利用して
zipファイルをzipで圧縮したいです

例えば

a(フォルダ)
-b.txt
-c.zip
-d.png

とあって、
単純にaを圧縮すると
a.zipがcが解凍された状態で圧縮されます

a.zip
-b.txt
-c(フォルダ)
-d.png

こうなるのではなく

a.zip
-b.txt
-c.zip
-d.png

というような感じに圧縮したいです
どうすればできるでしょうか？

Answer 1

単純にaを圧縮すると 
a.zipがcが解凍された状態で圧縮されます 

というのはただの思い込みだったようです

実際はzipが入っているフォルダが「.」が先頭のフォルダで除外されていたという状況だったみたいです

回答ありがとうございます

Answer 2

参考に
まず、Gruntを使うには、Node.jsとパッケージ管理ツールnpmが必要になるのでインストールしましょう。私は、Macportsを使ってインストールしましたが、申し訳ないほど簡単です。既にインストールしているか分からないって方は、ターミナルで下記コマンドを実行してバージョン番号が返ってくればインストールされています。

ターミナル
node -v
npm -v
Node.jsとnpmのインストール
まだNode.jsとnpmをインストールしていない方は、ターミナルで下記コマンドを実行して、Node.jsとnpmをインストールしましょう。

ターミナル
sudo port install nodejs
sudo port install npm
grunt-cliのインストール
Node.jsとnpmをインストールしたら、ターミナルで下記コマンドを実行して、Gruntのコマンドラインインターフェイス grunt-cliをインストールします。

ターミナル
sudo npm install -g grunt-cli
Scroll to top

package.jsonの作成

Gruntを使うには、プロジェクトのディレクトリにpackage.jsonとGruntfile.jsが必要になります。今回はデスクトップに置いたgrunt-testディレクトリをプロジェクトのルートディレクトリとして、ここにpackage.jsonファイルを作成してみます。

grunt-testディレクトリの構成
grunt-testディレクトリの構成

まず、ターミナルでcdコマンドを実行して、デスクトップのgrunt-testディレクトリをカレントディレクトリにします。続いて、npm initを実行します。

ターミナル
cd ~/Desktop/grunt-test
npm init
すると、ターミナルで下記項目を順番に質問されるので、答えを入力してreturnキーを押しましょう。基本的に各項目には初期値が用意されているので、entry point以外の項目で必要ないと思うものは、そのままreturnキーを押しても構いません。最後に Is this ok? と聞かれるので、returnキーを押すとカレントディレクトリにpackage.jsonが作成されます。

name:
プロジェクト名を入力します。URLセーフな文字列しか使用できません。
version:
プロジェクトのバージョンを入力します。
description:
プロジェクトの簡単な説明文を入力します。
entry point:
迷わず、Gruntfile.jsと入力します。
test command:
そのままreturnキーを押します。
git repository:
Gitレポジトリがあれば入力します。
keywords:
キーワードがあれば、カンマ区切りで入力します。
author:
製作者名を入力します。
license:
ライセンスを入力します。
この時点でpackage.jsonの中身を覗いてみると、こんな感じになっています。

package.json
{
"name": "grunt-test",
"version": "0.1.0",
"description": "This is test.",
"main": "Gruntfile.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "@u_kudox",
"license": "public domain"
}
Scroll to top

Gruntとプラグインのインストール

それでは、いよいよGruntとプラグインのインストールです。grunt-cliのインストールは最初の1回だけですが、Gruntとプラグインはプロジェクト毎にインストールする必要があります。

Gruntのインストール
ターミナルで下記コマンドを実行すると、プロジェクトのルートディレクトリにnode_modulesディレクトリが作成され、そこにGruntがインストールされます。–save-devオプションを付けることにより、package.jsonに必要な情報を追加してくれます。

ターミナル
cd ~/Desktop/grunt-test
npm install grunt --save-dev
プラグインのインストール
続いて、Gruntのプラグインをインストールしましょう。npm install プラグイン名 –save-dev コマンドで、指定したプラグインがnode_modulesディレクトリにインストールされます。

ターミナル
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-yuidoc --save-dev
npm install grunt-contrib-compress --save-dev
今回は、下記のプラグインだけをインストールしましたが、Gruntには数えきれない程のプラグインがあります。興味のある方は、こちらで探してみて下さい。

grunt-contrib-cssmin
CSSファイルを圧縮する。
grunt-contrib-uglify
JavaScriptファイルを圧縮する。
grunt-contrib-copy
ファイルやディレクトリをコピーする。
grunt-contrib-watch
ファイルの変更を監視してタスクをトリガーする。
grunt-contrib-yuidoc
YUIDocを書き出す。
grunt-contrib-compress
ファイルやディレクトリをzip/gzipなどの形式で圧縮する。
Scroll to top

Gruntfile.jsの作成

これでGruntを使用する準備が整いましたが、実際にGruntを使用するには、プロジェクトのディレクトリにGruntfile.jsを作成し、タスクの設定やプラグインのロードを指定する必要があります。まず、Gruntfile.jsの基本的な書式を見てみましょう。

すべてのGrunt用のコードは、module.exportsというラッパー関数の内部に記述します。そして、grunt.initConfigで各タスクの設定をJSON形式で指定し、grunt.loadNpmTasksでプラグインのロードを指定します。

Gruntfile.jsの基本的な書式
module.exports = function(grunt) {
grunt.initConfig({
// タスクの設定
});
// プラグインのロード
grunt.loadNpmTasks('プラグイン名');
};
Scroll to top

タスクの設定とGruntの実行

それでは、Gruntfile.jsでタスクを設定し、実際にGruntを実行してみましょう。ターミナルでgruntコマンドを実行する際は、cdコマンドでGruntfile.jsを置いたディレクトリをカレントディレクトリにしてから、実行して下さい。

CSSの圧縮
CSSの圧縮は、grunt-contrib-cssminプラグインで行います。grunt.initConfigにcssminプロパティを追加し、ターゲットを指定します。srcは圧縮前の元ファイル、destは圧縮・結合後のファイルになります。下記の例では、pc, mobileというプロパティ名でターゲットを指定していますが、この名前は任意の文字列で構いません。

Gruntfile.js
grunt.initConfig({
cssmin : {
pc : {
src : ['css/reset.css', 'css/styles.css'],
dest : 'css/pc.min.css'
},
mobile : {
src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
dest : 'css/mobile.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
タスクを実行するには、ターミナルでgrunt cssminを実行します。また、grunt cssmin:mobileのようにすることで、実行するターゲットを指定することもできます。

ターミナル
grunt cssmin
JavaScriptの圧縮
JavaScriptの圧縮は、grunt-contrib-uglifyプラグインで行います。grunt.initConfigにuglifyプロパティを追加し、ターゲットを指定します。下記の例では、オプションにbannerを指定し、ファイルの先頭にライセンス表記のコメントを追加しています。

Gruntfile.js
grunt.initConfig({
uglify : {
build : {
options : {
banner : grunt.file.read('js/License.js'),
},
src : ['js/BitmapData.js', 'js/GlowFilter.js'],
dest : 'js/all.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
タスクを実行するには、ターミナルでgrunt uglifyを実行します。grunt uglify:ターゲット名で実行するターゲットを指定することもできます。

ターミナル
grunt uglify
ファイルやディレクトリのコピー
grunt-contrib-copyプラグインを使うとファイルやディレクトリをコピーすることができます。grunt.initConfigにcopyプロパティを追加し、ターゲットを指定します。下記の例では、cssディレクトリ内の’.min.css’で終わるファイルをsample/cssディレクトリに、jsディレクトリ内の’.min.js’で終わるファイルをsample/jsディレクトリにコピーするようにしています。

Gruntfile.js
grunt.initConfig({
copy : {
css : {
files : [{expand:true, cwd:'css/', src:'.min.css', dest:'sample/css/'}]
},
js : {
files : [{expand:true, cwd:'js/', src:'.min.js', dest:'sample/js/'}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
タスクを実行するには、ターミナルでgrunt copyを実行します。grunt copy:ターゲット名で実行するターゲットを指定することもできます。

ターミナル
grunt copy
ファイルの変更を監視
grunt-contrib-watchプラグインを使うとファイルの変更を監視して、ファイルが変更された際に登録したタスクを実行することができます。grunt.initConfigにwatchプロパティを追加し、filesで監視するファイル、tasksでファイルが変更された際に実行するタスクを指定します。

Gruntfile.js
grunt.initConfig({
watch : {
css_pc : {
files : ['css/reset.css', 'css/styles.css'],
tasks : ['cssmin', 'copy:css']
},
css_mobile : {
files : ['css/mediaqueries.css'],
tasks : ['cssmin:mobile', 'copy:css']
},
js : {
files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
tasks : ['uglify', 'copy:js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
ファイルの監視を開始するには、ターミナルでgrunt watchを実行します。grunt watch:ターゲット名で監視するターゲットを指定することもできます。監視を終了するには、ターミナルでcontrolキーを押しながらcキーをタイプします。

ターミナル
grunt watch
YUIDocの書き出し
grunt-contrib-yuidocプラグインを使うとGruntでYUIDocを書き出すことができます。下記の例では、grunt.file.readJSONでpackage.jsonを読み込み、その値をYUIDocのパラメータに利用しています。実行するとdocsディレクトリにYUIDocのドキュメントが書き出されます。

Gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
yuidoc : {
compile : {
name : '<%= pkg.name %>',
description : '<%= pkg.description %>',
version : '<%= pkg.version %>',
options : {
paths : 'js',
outdir : 'docs'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-yuidoc');
YUIDocを書き出すには、ターミナルでgrunt yuidocを実行します。grunt yuidoc:ターゲット名で、実行するターゲットを指定することもできます。

ターミナル
grunt yuidoc
ファイル・ディレクトリの圧縮
grunt-contrib-compressプラグインを使うとファイルやディレクトリをzipなどの形式で圧縮することができます。下記の例では、先程docsディレクトリに書き出したYUIDocのドキュメント全体を1つのzipファイルに圧縮してoutputディレクトリに保存しています。

Gruntfile.js
grunt.initConfig({
compress : {
docs : {
options : {
archive : 'output/docs.zip'
},
files : [{expand:true, src:'**', cwd:'docs'}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-compress');
圧縮を実行するには、ターミナルでgrunt compressを実行します。grunt compress:ターゲット名で、実行するターゲットを指定することもできます。

ターミナル
grunt compress
カスタムタスク
grunt.registerTaskを使うと複数のタスクを組み合わせたり、オリジナルのタスクを登録することができます。下記の例では、先程の例で示したYUIDocの作成・ドキュメントのzip化という一連のタスクをdocsという名前で登録しています。

Gruntfile.js
grunt.registerTask('docs', ['yuidoc:compile', 'compress:docs']);
タスクを実行するには、ターミナルでgrunt ‘タスク名’ を実行します。

ターミナル
grunt docs
Scroll to top

Gruntfile.jsのサンプル

最後に今回のテストで作成したGruntfile.jsをサンプルとして載せておきます。初めてGruntを使ってみた感想としては、こんなに便利ならもっと早く導入してれば良かったと後悔しています。まだGruntを試されていない方は、これを期にGruntを導入されてみては如何でしょうか？ 以上、Gruntの使い方レポートでした。

Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
cssmin : {
pc : {
src : ['css/reset.css', 'css/styles.css'],
dest : 'css/pc.min.css'
},
mobile : {
src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
dest : 'css/mobile.min.css'
}
},
uglify : {
build : {
options : {
banner : grunt.file.read('js/License.js'),
},
src : ['js/BitmapData.js', 'js/GlowFilter.js'],
dest : 'js/all.min.js'
}
},
copy : {
css : {
files : [{expand:true, cwd:'css/', src:'.min.css', dest:'sample/css/'}]
},
js : {
files : [{expand:true, cwd:'js/', src:'.min.js', dest:'sample/js/'}]
}
},
watch : {
css_pc : {
files : ['css/reset.css', 'css/styles.css'],
tasks : ['cssmin', 'copy:css']
},
css_mobile : {
files : ['css/mediaqueries.css'],
tasks : ['cssmin:mobile', 'copy:css']
},
js : {
files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
tasks : ['uglify', 'copy:js']
}
},
yuidoc : {
compile : {
name : '<%= pkg.name %>',
description : '<%= pkg.description %>',
version : '<%= pkg.version %>',
options : {
paths : 'js',
outdir : 'docs'
}
}
},
compress : {
docs : {
options : {
archive : 'output/docs.zip'
},
files : [{expand:true, src:'**', cwd:'docs'}]
}
}
});

grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-yuidoc');
grunt.loadNpmTasks('grunt-contrib-compress');

grunt.registerTask('docs', ['yuidoc:compile', 'compress:docs']);
};

Answer 3

// パッケージzip-archiverを利用 https://npmjs.org/package/zip-archiver
var Zip = require('zip-archiver').Zip;

var input = 'code/'; // 圧縮するディレクトリ
var output = 'code.zip'; // 圧縮後のファイル名

// 圧縮
var zip = new Zip({ file: output });
zip.add(input, function() {
zip.done();
console.log('done.'); // 終了メッセージ
});
これは、下記のように 外部 zip コマンドを利用して実行することも出来ます。

// spawnをロード
var spawn = require('child_process').spawn;

// このスクリプトが存在するディレクトリへ変更
process.chdir( __dirname);

// ls -ln /home/hoge/mytest を実行する
var child = spawn('zip', ['-r', 'code.zip', 'code']);

// データが返ってきたら画面に圧縮状況をメッセージ出力
child.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});

// 終了メッセージ
child.on('exit', function (code) {
console.log('child process exited with code ' + code);
});

// code デレクトリと同じ階層で $ node zip.js を実行すると圧縮された code.zip が生成されます。

Comments

[S_Minecraft]

下記エラーが発生したので試せていませんが、
コードを読む限りzipをzipで圧縮する際に何も対処をとってないように見えますが
いけるのでしょうか？

```
path.js:233 throw new TypeError('Arguments to path.join must be strings')
TypeError: Arguments to path.join must be strings
at Object.win32.join (path.js:233:13)
at Zip.add(略\node_modules\zip-archiver\lib\index.js:56:25)
at Object.<anonymous> (D:\zip.js:6:5)
以下略
```