【Ubuntu】開発の間だけ、長すぎるJavaScriptファイルを分割したい

プログラミング

【最終更新 2012年3月14日】


【今回紹介する分割方法の特徴】
  • 一人用
  • 長くて読みづらくなったJavaScriptファイルを分割する。
  • しかし、本番ではひとつにまとめる。
  • 分割しても、開発中のファイル編集やブラウザでの動作確認などの際に余計な手間が増えることはない。
  • 欠点として、端末をずっと起動させておく必要がある。


【対象環境、必要なツール・知識】


【目次】
  1. inotifyをインストール
  2. 分割ファイルを作成
  3. シェルスクリプト作成
  4. 実行してみましょう
  5. ついでに (yui-compressorで圧縮)


inotifyをインストール

端末からインストールします。


$ sudo apt-get install inotify-tools


※inotifyは『ファイルやディレクトリに対して変更が行われると通知してくれる』ツールです。
【参考】
inotify でディレクトリを監視してみる - いますぐ実践! Linuxシステム管理 / Vol.157
http://www.usupi.org/sysad/157.html


↑ 目次へ

分割ファイルを作成

たとえば下記のコードを分割する場合。


【~/project1/original.js】
var hoge = 'hoge!';

var fuga = 'fuga!';

function testEcho() {

	alert(hoge + fuga);

}
適当な場所にフォルダを作り(ここではフォルダ名を『dev』とします。)、
その中に順番通りに番号を付けて保存します。


【~/dev/01.js】
var hoge = 'hoge!';


【~/dev/02.js】
var fuga = 'fuga!';


【~/dev/03.js】
function testEcho() {

	alert(hoge + fuga);

}


↑ 目次へ

シェルスクリプト作成

作成場所はどこでも構いません。
今回はホームに作ります。


【~/inotify.sh】
#!/bin/bash
# 分割ファイルが入ったフォルダへのパス

Dir1=$HOME/dev
# 本番ファイルが入ったフォルダへのパス

Dir2=$HOME/project1
while inotifywait -e modify $Dir1

do

	cat $Dir1/*.js > $Dir2/original.js

done


上記の処理の内容は、
このシェルスクリプトを実行した端末が開いている間ずっと、
inotifyでこのフォルダ内のファイルの変更を監視し、
変更を検知したらその都度、
分割ファイルの内容をまとめて本番ファイルへ記述する。
というものです。


忘れずに実行権限も与えておきましょう。

chmod 700 ~/inotify.sh


↑ 目次へ

実行してみましょう

では、端末を起動し、シェルスクリプトを実行しましょう。


$ . ~/inotify.sh
※この端末のウィンドウ、またはタブは、分割ファイルの編集中は閉じてはいけません。


テキストエディタで分割ファイルを適当に編集し、そのあとで本番用ファイルを開いてみて、変更が適用されていれば成功です。
(失敗する場合は、呼び出すファイルやコマンドのパス指定が間違っていないか確認してみてください)
これで、低スペックなネットブックでもストレスなく長大なソースコードを取り扱うことができます(つД｀)


↑ 目次へ

ついでに (yui-compressorで圧縮)

『ファイル分割』という趣旨とは直接関連はありませんが、YUI Compressorでjsファイルを圧縮する方法も今回の調査で習得したので紹介します。


まずはインストール。



$ sudo apt-get install yui-compressor


『original.js』を圧縮して『min.js』へ。



$ yui-compressor -o min.js original.js


文中の日本語も文字化けせずに取り扱ってくれるので、助かります (*´∀｀*)
注意点として、jsファイルの文法にエラーがあると処理が行われません。
ま、実用時にはそんなことはありえないでしょうが、お試しでこのツールを使ってて、なぜかエラーが出るのでおかしいなーと思ったら、元のjsファイルに誤りがあっただけという…orz

↑ 目次へ