読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

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

f:id:sitk:20160618091104p:plain

前回の記事。

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制作者のための教科書シリーズ

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

おわり。