本文へジャンプ

gulpでectを使ってみる：「gulp-ect」実践入門編

Posted by namio.araki

普段マークアップ関連は品質チェック中心の人間なのですが、何年ぶりかにマークアップをするとなかなかうまくいきませんね。
「知識だけあってもたまには実際に手を動かしてみないと本当の知識じゃない！」
と、つくづく頭デッカチになりかけている自分に反省しているARKです。

前置きが長くなりましたが、gulpって便利ですよね。
npmから直接叩くのもいいですが、他の人とかと合わせるには便利なものは使ってしまいたい派です。
今回はgulp-ectの導入・使い方のご紹介です。

ECTとは何ぞや？

過去記事でGrunt.jsからの使い方など紹介しているので、詳しくは見てもらえればわかると思いますが、ようはコーディングの際に共通DOMはテンプレート化しよう。ってことですね。

昔？でいう、Dreamweaverのテンプレート機能みたいなものです。
CMSのモジュールなどをイメージするとわかりやすいかもしれません。
後工程に優しく！というところからもマークアップ後にMovable TypeやWordPressを構築するときにもオススメです！

全体的な部分の記事は結構あるのですが、痒いところに届かない！
ことがあったのでそのあたりを中心にご紹介。
※あくまでその部分だけをメインに紹介してます。package.jsonすら使わない。（笑）

開発環境の準備

まずは何といっても開発環境を作りましょう。
僕はWindowsなので、コマンドプロンプトから。 

npm init    //ひたすら「Enter」で心配しない。最後だけ「y」「Enter」。
npm install gulp
npm install gulp-ect

もちろんいつものpackage.jsonがある人は、npm installだけでOK。

インストールが終わったら、お決まりのgulpfile.jsを作りましょう。 今回はベタに。

(function(){
    var _gulp = require('gulp');
    var _ect = require('gulp-ect');

    _gulp.task('ect', function(){
        _gulp.src(['./src/ect/*.ect'])
            .pipe(_ect())
            .pipe(_gulp.dest('./bin/'));
    });
})();

これで、

gulp ect

を実行出来ればOKです。

ご紹介するgulp-ect機能の使い方

ECTの機能の紹介は色々な記事があるので詳しくは割愛しますが、今回はこのような機能を使う場合をご紹介。

  • 定数はまとめて定義
  • 共通パーツは一括管理
  • ページのレイアウトは一括管理
  • ページに応じて分岐・ループ処理

※なかなか情報がなかったりするので、オレオレだったりしますがもっといい方法をご存じの方は是非教えてください。（笑）

gulp-ectで定数をまとめて定義する

基本と思いきや、意外にもオフィシャルにも何も書かれていない定数。
Gruntの記事だとinitのときにセットして「<%- @const %>」みたいな感じで呼びだすようですが、gulp-ectの場合にはどうやるんだ？
gulp-ectを実行の際に「data」として渡してみたりするのですがどうも不便。
結論からいうと、gulp-ect実行時にセットするのではなく単純にgulpfile.jsからインポートしちゃいました。

具体的には、

1. _const.js という下記JSを作成する

/**
 * 定数のセット
 */
var config = {
    websiteURL:'https://www.monster-dive.com',
    websiteName: 'MONSTER DIVE【モンスターダイブ】',
    websiteKeywords:'monsterdive,モンスターダイブ,ウェブクリエイティブ,スマートフォンアプリ,CMS構築,映像製作,ライブ中継',
    author:'monsterdive, inc.',
    pageConfig:{
        top:{
          pageName:'TOP'
        },
        about:{
            pageName:'会社概要 | About '
        }
    },
    info:[
        {
            title:'ニュースタイトル1',
            text:'ニュースの記事1'
        },
        {
            title:'ニュースタイトル2',
            text:'ニュースの記事2'
        },
        {
            title:'ニュースタイトル3',
            text:'ニュースの記事3'
        },
        {
            title:'ニュースタイトル4',
            text:'ニュースの記事4'
        },
        {
            title:'ニュースタイトル5',
            text:'ニュースの記事5'
        },
        {
            title:'ニュースタイトル6',
            text:'ニュースの記事6'
        },
    ]
};
module.exports = config;

2. gulpfile.js から _const.js を読み込む

var ectConfig = require('./src/js/include/_const.js');

3. gulp-ect 実行部分にセットする

.pipe(_ect())

を

.pipe(_ect({data: function (file, cb) {
    cb(ectConfig);
}}))

に変更。

4. index.ect ファイル側で、呼びだす

<!doctype html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title><%- @websiteName %></title>
</head>
<body>

</body>
</html>

gulp-ectで共通パーツは一括管理

ECTにはincludeという機能があるので、それを使います。

1. 呼び出し先となる _include/_header.ect ファイルを作成する

<header>ヘッダー</header>

2. 呼び出し元の index.ect から呼び出す

<% include '_include/_header' %>

3. 呼び出し先に変数を渡すとき

<% include '_include/_header', {page: 'TOP'} %>

4. 呼び出し先で、変数を受け取る

<header><%- @page %>のヘッダー</header>

gulp-ectでページのレイアウトは一括管理

ECTのextend機能です。

1. 呼び出し先となる、 layout/base.ext を作成する

<!doctype html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title><%- @websiteName %></title>
</head>
<body>

<main>
    <% content %>
</main>

<footer>共通フッター</footer>

</body>
</html>

2. 呼び出し元の index.ect を下記だけにする

<% extend 'layout/base' %>
<% include '_include/_header', {page: 'TOP'} %>
<main>コンテンツ</main>

これで実行すると、こんな感じになれば成功です。

<!doctype html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>MONSTER DIVE【モンスターダイブ】</title>
</head>
<body>


<header>TOPのヘッダー</header>

<main>コンテンツ</main>

<footer>共通フッター</footer>

</body>
</html>

3. せっかくなので、親となる base.ect にも変数を渡したい

ECTのblockを使います。
index.ectを下記のように変更する。

<% block 'description': %>TOPページです<% end %>

<% extend 'layout/base' %>

<% include '_include/_header', {page: 'TOP'} %>


<main>コンテンツ</main>

base.ectに

<meta name="description" content="<% content 'description' %>">

を追加。
「gulp ect」を実行し「TOPページです」が無事表示されると成功です。

4. 量産する

同じようにabout.ectを下記のように作ります。

<% block 'description': %>ABOUTページです<% end %>

<% extend 'layout/base' %>

<% include '_include/_header', {page: 'ABOUT'} %>


<main>ABOUTコンテンツ</main>

はい簡単に量産！

ページに応じて分岐・ループ処理

ここからは実践編です。
詳しい解説よりもTipsのほうがいいと思うのでどうぞ。

ループ処理1： _const.js に入れたinfoを表示

<ul>
<% for i in @info : %>
    <li>
        <p class="i-title"><%= i.title %></p>
        <p class="i-body"><%= i.text %></p>
    </li>
<% end %>
</ul>

ループ処理2： _const.js に入れたinfoを3件だけ表示

<ul>
<% @cnt=0 %>
<% for i in @info : %>
    <% if @cnt<3: %>
    <li>
        <p class="i-title"><%= i.title %></p>
        <p class="i-body"><%= i.text %></p>
    </li>
    <% end %>
    <% @cnt++ %>
<% end %>
</ul>

分岐処理1： _header.ect での分岐

<% if @page is 'TOP': %><p>TOPページだけ表示</p><% end %>

分岐処理2： base.ect での分岐

量産ページ（index.ect, about.ect）でpageを格納。

<% block 'page': %>TOP<% end %>

base.ect側で、

<% @page = content 'page' %>

で一旦格納したあとに、分岐させる。

<% if @page is 'TOP': %>website<% else: %>article<% end %>

全部入りサンプル

./gulpfile.js

(function(){
    var _gulp = require('gulp');
    var _ect = require('gulp-ect');
    var ectConfig = require('./src/js/include/_const.js');
    //■ECT
    _gulp.task('ect', function(){
        _gulp.src(['./src/ect/*.ect'])
            .pipe(_ect({data: function (file, cb) {
                cb(ectConfig);
            }}))
            .pipe(_gulp.dest('./bin/'));
    });
})();

./src/js/include/_const.js

/**
 * 定数のセット
 */
var config = {
    websiteURL:'https://www.monster-dive.com',
    websiteName: 'MONSTER DIVE【モンスターダイブ】',
    websiteKeywords:'monsterdive,モンスターダイブ,ウェブクリエイティブ,スマートフォンアプリ,CMS構築,映像製作,ライブ中継',
    author:'monsterdive, inc.',
    pageConfig:{
        top:{
          pageName:'TOP'
        },
        about:{
            pageName:'会社概要 | About '
        }
    },
    info:[
        {
            title:'ニュースタイトル1',
            text:'ニュースの記事1'
        },
        {
            title:'ニュースタイトル2',
            text:'ニュースの記事2'
        },
        {
            title:'ニュースタイトル3',
            text:'ニュースの記事3'
        },
        {
            title:'ニュースタイトル4',
            text:'ニュースの記事4'
        },
        {
            title:'ニュースタイトル5',
            text:'ニュースの記事5'
        },
        {
            title:'ニュースタイトル6',
            text:'ニュースの記事6'
        },
    ]
};
module.exports = config;

./src/ect/_include/_header.ect

<header>
    <p><%- @page %>のヘッダー</p>
    <% if @page is 'TOP': %><p>TOPページだけ表示</p><% end %>
</header>

./src/ect/layout/base.ect

<!doctype html>
<html lang="jp">
<head><% @page = content 'page' %>
    <meta charset="UTF-8">
    <title><%- @websiteName %></title>
    <meta name="description" content="<% content 'description' %>">
    <meta property="og:type" content="<% if @page is 'TOP': %>website<% else: %>article<% end %>">
</head>
<body>
<% content %>
<footer>共通フッター</footer>
</body>
</html>

./src/ect/index.ect

<% block 'page': %>TOP<% end %>
<% block 'description': %>TOPページです<% end %>
<% extend 'layout/base' %>
<% include '_include/_header', {page: 'TOP'} %>
<main>
    <ul>
        <% @cnt=0 %>
        <% for i in @info : %>
        <% if @cnt<3: %>
        <li>
            <p class="i-title"><%= i.title %></p>
            <p class="i-body"><%= i.text %></p>
        </li>
        <% end %>
        <% @cnt++ %>
        <% end %>
    </ul>
</main>

./src/ect/about.ect

<% block 'page': %>ABOUT<% end %>
<% block 'description': %>ABOUTページです<% end %>
<% extend 'layout/base' %>
<% include '_include/_header', {page: 'ABOUT'} %>
<main>ABOUTコンテンツ</main>

まとめ

定数を使うことにより、

  • ディレクターさんでもテキスト更新だけでページがどのような状態になるか確認できたり、
  • アシスタントの人に手伝ってもらいやすくなったり、

モジュール化することにより、

  • 使いまわすので同じ修正を何度もすることがなくなり、
  • CMSへの受け渡しなど意図が伝えやすくなり、

レイアウトを共通化することにより、

  • 量産に手間をかけることもなくなり、
  • 分岐、ループもあるので、各ページ固有の処理はちゃんと書ける。

いいこと三昧ですね。
導入ハードルも低いので是非試してもらえればと思います。

このようにいかに前工程後ろ工程に優しく、自動化効率化できるところは楽にして、頭を使うところに注力しようと頑張っています！
といった会社アピールでした。（笑）

よきgulp-ectタイムを。

Recent Entries
MD EVENT REPORT
What's Hot?
株式会社MONSTER DIVE
タグリスト
カテゴリアーカイブ
作者別アーカイブ
年月別アーカイブ