GulpもGruntも分からなかったので自作シェルスクリプトを作ったら、シェルの勉強になった。


最近、HTMLとCSSとJSファイルを圧縮したいと思い、噂として聞いていたGulpやらGruntを使ってみよう！と思い、調べてみましたが、**ものすごく分かりづらくて、やる気が失せてしまいました。**
見た感じ、あまりに便利な機能が付きすぎているのか、色々ググってみたけど、何をどうやれば良いのか、全く頭に入ってこない。。
ううぅ。。。(><)
私はただ、ちょっと圧縮できて、少し便利な機能が付いていれば良かったのに。。

じゃあ、もう仕方ない！
**自作しよう！！**

と、いう事で、自作してみることにしました。

# SassのインストールとClosureCompilerのダウンロード
事前準備です。
CSSの作成・圧縮に使うSass・JSの圧縮に使うClosureCompilerを取ってきます。
ClosureCompilerはjarファイルです。
参考URLを以下に示します。
<dl>
  <dt>Sassのインストール方法(mac)</dt>
  <dd>http://book.scss.jp/code/c2/02.html</dd>
  <dt>ClosureCompilerの取得</dt>
 <dd>https://developers.google.com/closure/compiler/docs/gettingstarted_app</dd>
</dl>

# 仕様
基本的な処理の流れとしては、

1.  既存ファイルの削除
2.  PHPによるHTMLファイル出力・HTMLファイル圧縮
3.  Javascriptファイル結合・Javascriptファイル圧縮
4.  CSSファイル生成・CSSファイル圧縮
5.  その他ファイルコピー

と、しています。

ディレクトリ構成としては以下のようにしました。
作成用ディレクトリは、ページ毎にディレクトリが分かれていて、そのページに該当するPHPファイル・SCSSファイル・JSファイルが格納されています。
共通処理は_bootstrapディレクトリに保存されています。
そして、_make.shを実行すると出力先ディレクトリにファイルが生成される仕組みです。
下記の例では、indexページとprivacyページの２つを生成します。

```
├── 出力用ディレクトリ
│   ├── 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
```

# シェルスクリプト作成
前述の仕様を鑑みて、こんな感じにしてみました。

```bash: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` が空文字列だとたいへん危険です。

```bash
rm -rf $copyDir/*
```


## ページ毎に処理を行う
ここからはページ毎の出力処理をします。
pages配列に書かれたディレクトリに対してpage生成を行います。
lsとか使ってコマンドで抽出しようかとも考えましたが、何となく止めました。

```bash
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' > `でコメントを削除してます。

```bash
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`で一時ファイルを削除しています。

```bash
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`で一時ファイルを削除します。

```bash
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`


<br />
***

こんな感じです。
変数名とか適当で分かりづらいですね。。
まぁ、テキトーに作り始めたので仕方ないです。
シェルも色々調べながら、見よう見まねで作った感じで、破れかぶれです。
ただ、コマンドの勉強には大いになりました。
得られたものは多かった！
たぶん、これからバグとか改良点とかもあるので、少しずつ改造しながら、使ってみようと思います。