こんにちは。櫻井です。
今回は僕が普段コーディングで使っているWebページビルドツールを紹介したいと思います。GitHubにあげてあるので使ってみてください。
https://github.com/Sakurai-Yuki/myWebPageBuilder

依存環境

node.jsとnpmは必須です。バージョンによっては動かないこともあるので個人的にはnodebrewを使ってnodeのバージョン管理をすることをおすすめします。
僕が普段使っている環境は
・node v8.10.0
・npm v6.13.6
この環境なら動くと思います。

インストール

プロジェクトごとにコーディングファイルの管理場所は違うと思いますのでそのプロジェクトの位置にmyWebPageBuilderを丸ごと移動させてターミナルでその位置まで移動してください。その後以下を入力してEnterを押せば必要なファイルがインストールされます。

  
    npm install
  

設定ファイル

インストールが終わればそのままでも使えますが、プロジェクトによってcssファイルを置く位置やjsファイルを置く位置が変わると思います。
細かい設定は全て
/gulp/config.js
で行います。

使い方

開発ファイルはsrcディレクトリ内に入れてください。まずは設定の仕方から説明していきます。

設定の仕方

ejsを使う場合は ejsFlag を true にしてください(デフォルトは true )。
sassを使う場合は sassFlag を true にしてください(デフォルトは true )。
sassを使う場合でsourcemapを使う場合は ‘sourcemapFlag’ を true にしてください(デフォルトは true )。
画像を圧縮する場合は imgMinFlag を true にしてください(デフォルトは true )。
画像を圧縮する場合でwebpを使う場合は imgWebPFlag を true にしてください(デフォルトは true )。
JSの圧縮を行いたい場合は jsMinFlag をtrue にしてください(デフォルトは false )。
ローカルサーバーを使用する場合は localServerFlag を true にしてください(デフォルトは true )。
ローカルサーバーを使用する場合を使用する場合でSSIを使用する場合は serverMode を SSI にしてください(デフォルトは normal )。
ローカルサーバーを使用する場合を使用する場合でPHPを使用する場合は serverMode を PHP にしてください(デフォルトは normal )。

ejsの使い方

htmlの吐き出し元となる、ejsファイルをhtmlフォルダの中にいれて開発してください。監視中、ejsフォルダのファイルが更新されると、distフォルダに吐出されます。
共通テンプレートは _include に入れてください。_ から始まるejsファイルはhtmlに書き出されません。
各ページのパス情報やmeta情報は _json フォルダ内の meta.json に記載してください。
ejsのみを書き出したい時はターミナルでgulp ejsと打ち込みEnterを押すと書き出されます。
ejsを使わずにhtmlで開発する場合はdist内に直接htmlファイルをおいてください。

scssの使い方

cssの吐き出し元となる、scssファイルを_scssフォルダの中にいれて開発してください。監視中、scssフォルダのファイルが更新されると、distフォルダに吐出されます。
scssのみを書き出したい時はターミナルでgulp sassと打ち込みEnterを押すと書き出されます。
scssを使わずにcssで開発する場合はdist内にcssファイルをおいてください。

jsの使い方

jsファイルを_jsフォルダの中にいれて開発してください。監視中、jsフォルダのファイルが更新されると、distフォルダに吐出されます。
jsのみを書き出したい時はターミナルでgulp jsと打ち込みEnterを押すと書き出されます。
jsの圧縮する処理が不要の場合はdist内にjsファイルをおいてください。

imgの使い方

imgファイルを_imgフォルダの中にいれて開発してください。監視中、imgフォルダのファイルが更新されると、distフォルダに吐出されます。
webpを生成したい場合も同様に_imgフォルダにimgファイルを入れてください。imgの圧縮やwebpを使用しない場合は、dist内にimgファイルをおいてください。

まとめ

今回は僕が普段使いしているWebページビルドツールをご紹介しました。
自作なのでまだまだ不完全なところがあり、まだ使い勝手に改善の余地はありますが、現状でも充分使えるツールになっていると思っているのでよかったら使ってみてください。