Webサイト制作プロジェクトを心地よくスタートするために

公開

久しぶりにgenerator-skywardをアップデートしました。ファイル修正・調整の他、テストをしていたjit-gruntconnect-ssiを利用するように変更するなどしました。

ブログを見返すと、generator-skywardについて触れた記事がないけれど、2012年末に「オリジナルテンプレート・ビルド環境2013年版の作成メモ」を作って以来アップデートを重ね、2013年秋頃にYeomanのジェネレーターにしたものです。

プロジェクトディレクトリを作成し、yo skywardをするだけで、スキャフォールディング(scaffolding - 足場作り)ができます。

具体的には、いつも利用するGruntfile.coffeeやSassを記述するベースファイルが用意できるだけでなく、npm installを自動で実行したり、下記のように(概略です)作業ディレクトリを自動で作成したりします。

project_root
  ├ backup       // 本番サーバーのファイルをバックアップするなど
  ├ materials    // 素材を格納
  ├ documents    // 原稿などを格納
  ├ htdocs       // HTML/CSS/JavaScriptを格納
  ├ tools        // タスクランナー関連ファイル等を格納
  └ test         // 検品に使うファイルを格納

手間無く、いつも同じディレクトリ構成ができるので、さまざまな案件に対応する場合でも迷い無く必要なファイルにアクセスできると考えています。エンジニア間でディレクトリ構成を統一することも可能です。(ちなみにPSD等はバージョン管理していないし、Node.jsのWebアプリなどはディレクトリ構成自体変わりますが...。組織が大きくなると、素材等は常時共有サーバーに入れるといったこともありますね。)

また、Sublime Textで画像のパスをサイトルートから書きやすくする設定ファイルなども自動で生成するといった設定をするなどし、作業が常に効率的に進むように考えています。

今後も環境の変化・技術の進化に合わせてアップデートしていきたいと考えています(アップデートにかける時間は最小限で...)。スタイルガイドを生成するHologramも近いうちに本採用する予定です。

ちなみに、巷で流行のgulp.jsに移行する予定は今のところありません。gulpも使えるし、タスクの途中でファイルが生成されないのは良いなと思うのですが、gulpfile.coffeeを作りこむ時間もいくらか必要だし、プラグインのblakListの存在がちょっと面倒(もちろんblakListの指摘はもっともかもしれないけど)。今のところGruntにあまり不満がないというのも大きいですし、次期Gruntに期待しているというのもありますね。

generator-skywardの使い方

  1. npm i -g yo generator-skywardでYeomanとgenerator-skywardをインストール
  2. プロジェクトディレクトリを作成
  3. yo skywardでスキャフォールディング
  4. cd toolsでGruntfileのあるディレクトリに移動し、gruntで作業開始