普段マークアップ関連は品質チェック中心の人間なのですが、何年ぶりかにマークアップをするとなかなかうまくいきませんね。
「知識だけあってもたまには実際に手を動かしてみないと本当の知識じゃない!」
と、つくづく頭デッカチになりかけている自分に反省しているARKです。
前置きが長くなりましたが、gulpって便利ですよね。
npmから直接叩くのもいいですが、他の人とかと合わせるには便利なものは使ってしまいたい派です。
今回はgulp-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です。
ECTの機能の紹介は色々な記事があるので詳しくは割愛しますが、今回はこのような機能を使う場合をご紹介。
※なかなか情報がなかったりするので、オレオレだったりしますがもっといい方法をご存じの方は是非教えてください。(笑)
基本と思いきや、意外にもオフィシャルにも何も書かれていない定数。
Gruntの記事だとinitのときにセットして「<%- @const %>」みたいな感じで呼びだすようですが、gulp-ectの場合にはどうやるんだ?
gulp-ectを実行の際に「data」として渡してみたりするのですがどうも不便。
結論からいうと、gulp-ect実行時にセットするのではなく単純にgulpfile.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;
- var ectConfig = require('./src/js/include/_const.js');
- .pipe(_ect())
を
- .pipe(_ect({data: function (file, cb) {
- cb(ectConfig);
- }}))
に変更。
- <!doctype html>
- <html lang="jp">
- <head>
- <meta charset="UTF-8">
- <title><%- @websiteName %></title>
- </head>
- <body>
- </body>
- </html>
ECTにはincludeという機能があるので、それを使います。
- <header>ヘッダー</header>
- <% include '_include/_header' %>
- <% include '_include/_header', {page: 'TOP'} %>
- <header><%- @page %>のヘッダー</header>
ECTのextend機能です。
- <!doctype html>
- <html lang="jp">
- <head>
- <meta charset="UTF-8">
- <title><%- @websiteName %></title>
- </head>
- <body>
- <main>
- <% content %>
- </main>
- <footer>共通フッター</footer>
- </body>
- </html>
- <% 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>
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ページです」が無事表示されると成功です。
同じようにabout.ectを下記のように作ります。
- <% block 'description': %>ABOUTページです<% end %>
- <% extend 'layout/base' %>
- <% include '_include/_header', {page: 'ABOUT'} %>
- <main>ABOUTコンテンツ</main>
はい簡単に量産!
ここからは実践編です。
詳しい解説よりもTipsのほうがいいと思うのでどうぞ。
- <ul>
- <% for i in @info : %>
- <li>
- <p class="i-title"><%= i.title %></p>
- <p class="i-body"><%= i.text %></p>
- </li>
- <% end %>
- </ul>
- <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>
- <% if @page is 'TOP': %><p>TOPページだけ表示</p><% end %>
量産ページ(index.ect, about.ect)でpageを格納。
- <% block 'page': %>TOP<% end %>
base.ect側で、
- <% @page = content 'page' %>
で一旦格納したあとに、分岐させる。
- <% if @page is 'TOP': %>website<% else: %>article<% end %>
- (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/'));
- });
- })();
- /**
- * 定数のセット
- */
- 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;
- <header>
- <p><%- @page %>のヘッダー</p>
- <% if @page is 'TOP': %><p>TOPページだけ表示</p><% end %>
- </header>
- <!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>
- <% 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>
- <% block 'page': %>ABOUT<% end %>
- <% block 'description': %>ABOUTページです<% end %>
- <% extend 'layout/base' %>
- <% include '_include/_header', {page: 'ABOUT'} %>
- <main>ABOUTコンテンツ</main>
定数を使うことにより、
モジュール化することにより、
レイアウトを共通化することにより、
いいこと三昧ですね。
導入ハードルも低いので是非試してもらえればと思います。
このようにいかに前工程後ろ工程に優しく、自動化効率化できるところは楽にして、頭を使うところに注力しようと頑張っています!
といった会社アピールでした。(笑)
よきgulp-ectタイムを。