Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

最近、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ページの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

シェルスクリプト作成

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

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



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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away