フロントエンドエンジニア必見！Metalsmith x Swig x Gulp を使いこなしてみる。

前回の記事。

www.kobatatakayuki.com

今回は、MetalsmithとSwigに加え、Gulpも導入してみました。

• Metalsmith：静的サイトジェネレータ
• Swig：テンプレートエンジン
• Gulp：タスクランナー

そしたら、いろいろ幸せになれましたのでおすそ分け。

主なフォルダ構成

前回から、出力先のフォルダ名を変更しました。

• _source：ここで作業します。このフォルダ階層を保ったまま、「public_html」に吐き出されます
• _tpl：テンプレートファイルの管理をします
• public_html：コンパイルされたファイルが生成されます

/root/    
┣ /_source/　　　　　　ー呼び出し元（ソース）のフォルダ    
┃　┣ /cmn/　　　　　 ー共通ファイル    
┃　┃　┣css　　　　　 ーSassファイル    
┃　┃　┣img　　　　　 ー画像ファイル    
┃　┃　┗js　　　　　 ーJSファイル        
┃　┣ /company/　　　 ー階層構造も作れます    
┃　┃　┗index.html    
┃　┗index.html    
┣ /_tpl/　　　　　　　　ーテンプレート用のフォルダ    
┃　┣inc_css.html    
┃　┣inc_footer.html    
┃　┣inc_ga.html    
┃　┣inc_header.html    
┃　┣inc_js.html    
┃　┣inc_meta.html    
┃　┣inc_side.html    
┃　┣tpl_default.html    
┃　┗tpl_test.html    
┣ /gulp/    
┃　┗config.js　　　　　　　ーgulpの基本設定ファイル    
┣ /public_html/　　　　　　ー吐き出し用のフォルダ（コンパイル後に生成）    
┃　┣ /cmn/　　　　　　　　 ー共通ファイル    
┃　┃　┣css　　　　　　　　 ーcssファイル    
┃　┃　┣img　　　　　　　　 ー画像ファイル    
┃　┃　┗js　　　　　　　　 ーJSファイル        
┃　┣ /company/　　　     
┃　┃　┗index.html    
┃　┗index.html    
┣ metalsmith.json　　　ーmetalsmithの設定ファイル    
┗ package.json　　　　 ーもろもろ設定ファイル    

ようやく、オレオレプロジェクトセットができつつあります(๑´ڡ`๑)

_tplフォルダ内

下記の接頭辞を付けます。

• テンプレートファイル：tpl_
• インクルードファイル：inc_

これつけておくだけで、見やすくなりました。

ワークフロー

構築の流れは下記のような感じ。

1. プロジェクトフォルダをつくる
2. npm install する ← これ、まじ最高。
3. gulp run する ← task名を「run」にしてます
4. ガリガリ構築する

プロジェクトをスタートさせるときに、いろいろ便利になりました。

さらには、プロジェクトメンバーと共有するにも、コレ一式渡して npm install してもらえれば、同じ環境ができてしまう。

ステキです。

バージョン管理するときには、少々気をつけないといけなさそう。

さいごに

サッカーと同じで、毎日コードを書き続けないとだめですねぇ。

次の課題としては、、、

• バージョン管理
• スタイルガイドジェネレータ（aigisに再挑戦！）

あたりかな。

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ

おわり。