Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@PbN3irBg4EmU8yTfKFjg

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

Last updated at Posted at 2016-07-10

最近、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

仕様

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

  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

シェルスクリプト作成

前述の仕様を鑑みて、こんな感じにしてみました。

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


***

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

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?