Help us understand the problem. What is going on with this article?

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追記)
ちょっと書き直しました。(^^

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away