EJSとSassとgulpで静的HTMLサイトを作る

EJSとは

Embedded JavaScript templating.
埋め込みJSテンプレートということらしく、HTMLを構築するときに、パーツ化、変数化をJavascriptを書くことができます。
PHPとかCMSとか使えない静的なHTMLの構築のときに、Dreamweaverのテンプレートみたいなことがgulp環境化で実行できるので、とても便利です。gulp下でできるので、いつもつかっているSassとかと組み合わせると静的HTMLのコーディングがとてもラクになります。

• 静的なHTMLサイトを構築するときに、EJSをつかうとヘッダ・フッタの共通パーツを一つのファイルで管理できたり、それでいてタイトルやmeta要素などをページごとに変えたりとかできるので便利です。
• なによりJavascriptなのでWeb（とくにフロント）の人にはいじりやすいのではないかと思います。
• Webサイト構築に必須なSassと組み合わせると、静的HTMLの制作がとても楽になりました。
• それから、gulpが4になって書き方が変わってたりして少し躓いたのでそれも一緒に備忘録。

最低限必要なもので環境構築

インストール

$ yarn add gulp gulp-sass gulp-autoprefixer gulp-ejs --dev

もしくは

$ npm install gulp gulp-sass gulp-autoprefixer gulp-ejs --save-dev

どちらかお好みでどうぞ。
package.jsonはこんな感じになります。

package.json

{
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-ejs": "^3.3.0",
    "gulp-sass": "^4.0.2"
  }
}

gulpfileを書きます

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var ejs = require("gulp-ejs");

// 監視　※gulp4の書き方です。
gulp.task( "default", function () {
    gulp.watch( "sass/**/*.scss", gulp.series( "sass" ) ); // sassディレクトリ以下の.scssファイルの更新を監視
    gulp.watch( "ejs/**/*.ejs", gulp.series( "ejs" ) ); // ejsディレクトリ以下の.ejsファイルの更新を監視
});

// Sass
gulp.task( "sass", function () {
    return gulp.src( 'sass/*.scss' )
        .pipe( sass().on( 'error', sass.logError ) )
        .pipe( autoprefixer( {
            // ベンダープレフィックスをどこまでつけるか（基本2バージョン前、IEは9以降・・・）
            browsers: [ 'last 2 version', 'ie >= 9', 'iOS >= 7', 'Android >= 4.2' ],
        }))
        .pipe( gulp.dest( './css' ));
});

// EJS
gulp.task( "ejs", function () {
    return gulp.src(["ejs/**/*.ejs", '!' + "ejs/**/_*.ejs"])
        .pipe(ejs({}, {}, { ext: '.html' }))
        .pipe( gulp.dest( "./" ) );
});

フォルダ構成

.
├── css/
│   └── style.css
├── ejs/
│   ├── index.ejs
│   └── parts/
│       ├── _footer.ejs
│       └── _header.ejs
├── gulpfile.js
├── node_modules
├── package.json
└── sass/
    └── style.scss

• ejs/下のファイル（●●.ejs）を更新するとルートに●●.htmlで書き出されます。
• _で始まるejsファイルは、書き出されません。（パーツとして利用するなど）
• sass/下のファイル（●●.scss）を更新するとcss/に書き出されます。

実行

上記が揃ったらgulpコマンド実行

$ gulp

あとは制作してくだけです。

---

（19/02/04 20:54追記）
ちょっと書き直しました。(^^