最近、HTMLとCSSとJSファイルを圧縮したいと思い、噂として聞いていたGulpやらGruntを使ってみよう!と思い、調べてみましたが、ものすごく分かりづらくて、やる気が失せてしまいました。
見た感じ、あまりに便利な機能が付きすぎているのか、色々ググってみたけど、何をどうやれば良いのか、全く頭に入ってこない。。
ううぅ。。。(><)
私はただ、ちょっと圧縮できて、少し便利な機能が付いていれば良かったのに。。
じゃあ、もう仕方ない!
自作しよう!!
と、いう事で、自作してみることにしました。
SassのインストールとClosureCompilerのダウンロード
事前準備です。
CSSの作成・圧縮に使うSass・JSの圧縮に使うClosureCompilerを取ってきます。
ClosureCompilerはjarファイルです。
参考URLを以下に示します。
- Sassのインストール方法(mac)
- http://book.scss.jp/code/c2/02.html
- ClosureCompilerの取得
- https://developers.google.com/closure/compiler/docs/gettingstarted_app
仕様
基本的な処理の流れとしては、
- 既存ファイルの削除
- PHPによるHTMLファイル出力・HTMLファイル圧縮
- Javascriptファイル結合・Javascriptファイル圧縮
- CSSファイル生成・CSSファイル圧縮
- その他ファイルコピー
と、しています。
ディレクトリ構成としては以下のようにしました。
作成用ディレクトリは、ページ毎にディレクトリが分かれていて、そのページに該当するPHPファイル・SCSSファイル・JSファイルが格納されています。
共通処理は_bootstrapディレクトリに保存されています。
そして、_make.shを実行すると出力先ディレクトリにファイルが生成される仕組みです。
下記の例では、indexページとprivacyページの2つを生成します。
├── 出力用ディレクトリ
│ ├── index.css
│ ├── index.html
│ ├── index.js
│ ├── jquery-min.js
│ ├── privacy.css
│ ├── privacy.html
│ └── privacy.js
│
└── 作成用ディレクトリ
├── _bootstrap
│ ├── bootstrap.js
│ ├── bootstrap.php
│ ├── bootstrap.scss
│ ├── closureCompiler
│ │ ├── COPYING
│ │ ├── README.md
│ │ └── compiler.jar
│ └── copy
│ └── jquery-min.js
├── index
│ ├── index.js
│ ├── index.php
│ └── index.scss
├── privacy
│ ├── privacy.js
│ ├── privacy.php
│ └── privacy.scss
│
├── .map
│
└── _make.sh
シェルスクリプト作成
前述の仕様を鑑みて、こんな感じにしてみました。
#!/bin/bash
copyDir=<コピー先のパス>
#ファイル処理
echo "remove copyDirectory Files : ${copyDir}"
rm -rf $copyDir/*
echo "start Main Method"
pages=("index" "privacy")
for page in ${pages[@]}; do
#ファイルパス設定
echo " ${page} : set FilePath"
basePath="${page}/${page}."
phpPath="${basePath}php"
jsPath="${basePath}js"
scssPath="${basePath}scss"
#php出力
echo " ${page} : set HTML"
phpString="<?php define('PAGE', '${page}'); include_once('_bootstrap/bootstrap.php'); ?>"`cat $phpPath`
echo $phpString | php | tr -d '\r' | tr -d '\n' | tr -d '\t' | perl -pe 's/> +</></g' | perl -pe 's/<!--.*-->//g' > $copyDir"/"$page".html"
#js出力
echo " ${page} : set JS"
tmpJsName=tmp.js
cat _bootstrap/bootstrap.js $jsPath > $tmpJsName
java -jar _bootstrap/closureCompiler/compiler.jar --js=$tmpJsName --js_output_file=$copyDir"/"$page".js"
rm -rf $tmpJsName
#css出力
echo " ${page} : set CSS"
tmpScssName=tmp.scss
cssPath=$copyDir"/"$page".css"
echo '@import "_bootstrap/bootstrap.scss";'`cat $scssPath` > $tmpScssName
scss $tmpScssName:$cssPath --style compressed --no-cache
head -n 1 $cssPath > $cssPath
rm -rf $tmpScssName
done;
#mapファイルを移動
echo "move scss map File"
mv $copyDir*.map .map/
#ファイルコピー
echo "copy Files"
cp _bootstrap/copy/* $copyDir
これだけだと何も分からないので、解説を入れます。
既存ファイルの削除
出力先ディレクトリに入っているファイルを消すだけの処理です。
$copyDir
が空文字列だとたいへん危険です。
rm -rf $copyDir/*
ページ毎に処理を行う
ここからはページ毎の出力処理をします。
pages配列に書かれたディレクトリに対してpage生成を行います。
lsとか使ってコマンドで抽出しようかとも考えましたが、何となく止めました。
pages=("index" "privacy")
for page in ${pages[@]}; do
#ファイルパス設定
echo " ${page} : set FilePath"
basePath="${page}/${page}."
phpPath="${basePath}php"
jsPath="${basePath}js"
scssPath="${basePath}scss"
#処理
done;
PHPによるHTMLファイル出力・HTMLファイル圧縮
PhpStringの部分にPHPソースを格納しています。全部のページにinclude_once('_bootstrap/bootstrap.php');
とか書くのも馬鹿馬鹿しいなと思って、ここで挿入するようにしました。
echo $phpString | php
でPHPを実行して
tr -d '\r' | tr -d '\n' | tr -d '\t'
の部分で改行とタブの削除を行っています。
さらにperl -pe 's/> +</></g'
でタグ間のスペースを削除して、
perl -pe 's/<!--.*-->//g' >
でコメントを削除してます。
phpString="<?php define('PAGE', '${page}');include_once('_bootstrap/bootstrap.php'); ?>"`cat $phpPath`
echo $phpString | php | tr -d '\r' | tr -d '\n' | tr -d '\t' | perl -pe 's/> +</></g' | perl -pe 's/<!--.*-->//g' > $copyDir"/"$page".html"
Javascriptファイル結合・Javascriptファイル圧縮
cat _bootstrap/bootstrap.js $jsPath > $tmpJsName
にて、catコマンドでファイル結合したものを一時ファイルに入れています。
そして、java -jar _bootstrap/closureCompiler/compiler.jar --js=$tmpJsName --js_output_file=$copyDir"/"$page".js"
にてcompiler.jarを使い、ファイル圧縮しています。
jsファイルの圧縮に関しては、色々と面倒くさかったので、ツールを使わせていただきました。
rm -rf $tmpJsName
で一時ファイルを削除しています。
tmpJsName=tmp.js
cat _bootstrap/bootstrap.js $jsPath > $tmpJsName
java -jar _bootstrap/closureCompiler/compiler.jar --js=$tmpJsName --js_output_file=$copyDir"/"$page".js"
rm -rf $tmpJsName
CSSファイル生成・CSSファイル圧縮
echo '@import "_bootstrap/bootstrap.scss";'`cat $scssPath` > $tmpScssName
でbootstrapファイルを読み込むように追記したscssプログラム文を生成して一時ファイルに格納しています。
その後、scss $tmpScssName:$cssPath --style compressed --no-cache
でcssファイルを生成しています。このコマンドで生成されたCSSは既に圧縮されています。
ですが、最後にmapファイルに関するコメントが書かれています。
なので、head -n 1 $cssPath > $cssPath
で最初の一行のみのCSSファイルに変更します。
rm -rf $tmpScssName
で一時ファイルを削除します。
tmpScssName=tmp.scss
cssPath=$copyDir"/"$page".css"
echo '@import "_bootstrap/bootstrap.scss";'`cat $scssPath` > $tmpScssName
scss $tmpScssName:$cssPath --style compressed --no-cache
head -n 1 $cssPath > $cssPath
rm -rf $tmpScssName
mapファイルを移動
cssファイル生成の際に出るmapファイルを作成用ディレクトリの.mapディレクトリに移動します。
mv $copyDir*.map .map/
ファイルコピー
作成用ディレクトリのcopyディレクトリにあるファイルをコピーします。
cp _bootstrap/copy/* $copyDir
***
こんな感じです。
変数名とか適当で分かりづらいですね。。
まぁ、テキトーに作り始めたので仕方ないです。
シェルも色々調べながら、見よう見まねで作った感じで、破れかぶれです。
ただ、コマンドの勉強には大いになりました。
得られたものは多かった!
たぶん、これからバグとか改良点とかもあるので、少しずつ改造しながら、使ってみようと思います。