その12018.01.312019.01.26gulpNode.jspugどうもユーキです。gulp4を使ってWeb制作の効率をあげようPug(Jade)/HTML編です。今回から実際にファイルを変換できるようにして開発環境を整えていきます。今回は、Pugを使ってHTMLファイルに変換できるようにしていきます。まとめPug(Jade)とは?もともとはJadeと呼ばれており、version2からPugという名前に変わりました。このPugというものは、HTML用のJavascriptテンプレートエンジンです。一定の記述ルールがあるおかげで、素のHTMLよりも記述を短くすることができます。Pug記述のルールまず、基本的にはインデントで親子の階層関係を表します。インデントを普段からつけている人にはかなり入りやすいかなと思います。普段はあまりインデントをつけてない人はこれを機につけるようにしていきましょう!これであなたも立派なインデンターです!(?)その他ルールというかPugでできることは、こんな感じです。HTMLタグの<>を書かなくてよい、閉じタグもいらないclassやidを短く記述可能Pug上でJSがつかえる、Pug用の関数もつくることができる別のPugファイルを読み込ませたり、レイアウト用のPugファイルを作ってそれを元にHTMLを作ることが容易あげればキリがないのですが、通常のHTMLを使うよりもかなりメリットがあります。運用するときなど修正が多い場合に力を発揮します。学習コストもほとんどかからずに習得が可能です。積極的に使って覚えましょう!インストールメリットもわかったところで、早速インストールしたいところですが、その前に、今回はどんなファイル構成にするのか先に決めておきます。以下に変換後ファイルが置かれるようになる(変換後に出力されるので、現状は_appのみで大丈夫です)といった構成になります。gulpfile.jsに変換後のディレクトリを直接指定してもいいのですが、リネームしたい場合などディレクトリ名だけかえればOKといった感じで、作業者が使いやすいよう汎用性を持たせるためにこの構造にしておいてます。ファイル構成はプロジェクトや案件ごとに自分で使いやすい状況にしたほうがいいです。扱いやすい状態にしましょう。前置きが長くなりましたが、インストールはこちらです。gulp-pugPug用のタスクを追加まずは、PugファイルからHTMLファイルに変換するタスクを書きます。done();}こんな感じになります。done();});と書くことも可能です。ぐぐってみるとどっちかで書かれてることが多いですね。(自分のgithubで公開してるものも無名関数使ってます)ということで、早速内容をそれぞれ解説していきます。gulp.taskgulpのタスクを作成する関数です。関数)となっており、依存タスクを配列で書くことが可能でしたが、4系からは変わってます。関数)依存タスクの記述が省かれ、シンプルになりましたね!じゃあ依存タスクどうすんのって思ってる方、以下に説明書いておきます。いいやって方は飛ばしてしまっても大丈夫です!依存タスクとは?別のタスクも一緒に動かしたい、動かす必要があるときに指定すると一緒にタスクが動作してくれます。今回は実装しませんが、連載のどこかでローカルサーバー起動・リロードするタスクを作ります。そのタスクをPugからHTMLに変換がかかった際に実行されれば、変換がかかったあとにリロードがかかるようにできますよね?いちいちブラウザに戻って更新かけるという手間を省くことができます。効率がいいですね!バージョン4.xで依存タスクを書きたい場合は、gulp.series関数を使って表します。}));このように置き換えられました。gulp.src対象となるファイルを指定する関数です。pipe関数でつないでいき、順々に処理を実行していきます。[options])globsっていうのは、パターンにマッチするディレクトリやファイルのパスを表します。「*」「?」などのワイルドカードを使用可能です。gulp.src('./src/**/*.pug')./src/以下にある.pugファイル全てが対象になります。特定のディレクトリを除外したい場合は、!(エクスクラメーションマーク)を使うことで実現できます。'!./src/parts/**/*.pug'])のように書くと、./src/parts/ディレクトリを以下のpugファイルは対象外にすることができます。required(‘gulp-pug’)をして、pugという関数を使えるようにしてあります。この関数でPugファイルからHTMLファイルに変換をかけています。引数にはoptionを設定できます。trueという指定をしていますが、これは、インデントや改行をいれるかどうかというオプションです。デフォルトはfalseになっていて、1行で全て表示されてしまうため、非常に読みづらいです。ファイルサイズを少しでも軽くしたいときは、余計な改行やインデントが無い方が軽くなりますよね?そんなときにfalseにすればいいです。その他のオプションもたくさんありますが、今回は端折ります。細かく実装するときに解説していきます。どんなオプションが有るか気になる方は下記に載っているのでみてください。gulp-pugのGitHubPugのAPIリファレンスgulp.destファイルの出力先を指定する関数です。pipe関数で伝わってきた情報を指定した出力先に吐き出します。[options])さらに細かく知りたい場合は、英語ですが、公式ドキュメントに載っているので見てみてください!Pugファイルを作成まずは、ファイルの内容です。gulpテストつくりましたでしょうか?HTMLがわかればぱっと見でなにやってるのか大体わかりますよね。してませんか?単純にh1タグでgulpテストと表示するファイルを素のHTMLで書いてみます。</body></html>明らかにスッキリしてますよね。本来であれば、ヘッダー、グローバルナビゲーション、サイドバー、メインコンテンツ、フッター...などなど膨大なタグの嵐になるところが、シンプルでわかりやすくなります。_app/gulpうまく実行されましたか?html/index.htmlができてるか確かめてみましょう!できてれば変換成功です!これでpugは変換できるようになりました。まとめこれでPugをHTMLに変換できるようになりました。変換前のファイルはシンプルにでき、出力する際にも簡単に余計な改行を消したりできるということはわかったと思います。今回はまずPugを動かしてみただけなので、実際はもう少しカスタマイズして使いやすくできます。Meユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。その他日々気になったこと、思ったことも書いてます。お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。ウェブスタジオTANITOP。