YATのBlog

Web制作を行う全ての方へ

GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。

Gulpのpugやscss、ブラウザーシンクなど、普段利用する開発環境をGitHubに掲載しています。

GitHub:speedy

何が出来るのか？

htmlを記述するのに pug を採用しています。

div.contents
h1.contents_ttl 見出し
p.contents_p 本文

<div class="contents">
<h1 class="contents_ttl">見出し</h1>
<p class="contents_p">本文</p>

上記のように、pugだとタグを簡潔に書くことができ、閉じタグの必要がありません。ですので、コーディングで発生する閉じタグ忘れや、タグの入力の手間が大きく緩和されます。

cssの記述はscssを採用しています。

.content {
    width: 100%;
    &_ttl {
        font-size: 2.0px;
    }
    &_p {
        font-size: 1.4px;
    }
}
.content {
    width: 100%; }
.content_ttl {
    font-size: 20px; }
.content_p {
    font-size: 14px; }

scssではcssの記述で出来ないネストや変数、mixinなどコーディングをより行いやすい機能が沢山存在しています。

また、ファイルを保存するとブラウザシンクが働き、プレビューに利用しているブラウザが自動でリロードされます。
また、ブラウザーシンクにはipアドレスが発行され、スマートフォンやタブレットでアクセスすることで、全ての端末において、自動でリロードが走り、どれかのブラウザでスクロールすれば、すべての端末で同じように画面がスクロールします。

他にも、吐き出されるファイルのミニファイ、画像ファイルの圧縮、ベンダープレフィックスの自動付与など、手間のかかるものの多くを自動で行うことが可能です。

また、pugでは共通パーツ（ヘッダーやフッターなど）をテンプレート化したり、変数を使って、ページごとにテンプレートの出力を変えたりと行ったことも可能になっています。

Speedyの使い方

2019年2月8日追記

Gulp 4 に対応し、バージョン2をリリースしました。一部変更があるので加筆しています。

Speedyを動かすために必要なもののイントール

まずはじめに、Gulpを使うのに必要なものを準備します。

  • Node.js
  • Gulp

Gulp自体はNode.jsで動いていますので、まず Node.jsがローカルマシーンにインストールされているか確認します。

以下はMacであればターミナル。Windowsであればコマンドプロンプトでの方法となります。

 node -v

画面に v4.. のようにバージョンが出力されれば、Node.jsはインストールされています。
でてこない場合は Node.jsのインストールが必要となります。
ただ、Node.jsには様々なバージョンがありますので、Node.jsのバージョン管理ツールからインストールを行い、プロジェクトに応じてバージョンを切り替えることをオススメします。

バージョン管理のシステムには複数存在しています。

  • ndenv
  • anyenv
  • NodeBrew
  • nvm
  • nodist

などです。Windowsの場合は nodist Macの場合はNodeBrewやnvmになります。

node.jsのインストールについても、上記にそれぞれ記述がありますので、そちらを参考にしてみてください。

Gulpのインストール

GulpはNodeのパッケージになっています。これから先にインストールするブラウザシンクやpugなどもNodeのパッケージになり、それらは npm というもので管理されていて、それを利用してインストールします。

 npm install --global gulp-cli

-g はグローバルにインストールするという意味です。

インストールが完了しているか確認します。

旧バージョン
gulp -v

Speedy バージョン2以降
npx gulp -v

バージョンが出力されればOKです。
これで、Node.jsとGulpのインストールが完了しました。

Speedyの設定

GitHubよりSpeedy をダウンロードします。

ローカルマシーンの開発ディレクトリにダウンロードしたデータを移し、移動します。

/example/speedy

 cd /example/speedy

ダウンロードしたデータの中に package.json というファイルが入っています。
この中にはSpeedyに必要なパッケージが書かれていますので、それらをインストールします。
インストールするには下記コマンドになります。

 npm install

終わったら設定は終了です。

Gulpを起動するには

旧バージョン
gulp

Speedy バージョン2以降
npx gulp

開発中はこのコマンドで gulp を起動しっぱなしにしてください。

ソースファイルのコンパイルには。

旧バージョン
gulp build

Speedy バージョン2以降
npx gulp build

を行います。

ディレクトリ構成

Speedyのディレクトリ構成についてです。

about/ … pugより吐き出されるhtmlが入ります。pug/about/が ここにあたります。
css/ … scssより吐き出されるcssファイルが格納されます。
images/ … プロジェクトで必要な画像ファイルの格納先です。
js/ … 開発したJavaScriptのファイルがここに吐き出されます。
pug/ … htmlのもととなるpugファイルの格納先です
src/scripts/ … JavaScriptの元となるJSファイルの格納先です
src/styles/ … CSSの元となるscssファイルの格納先です。

開発時は基本的に

  • pug/
  • src/scripts/
  • src/styles/
  • images/

を触ることになります。

site.jsonに関して

pug/_data/site.json

このファイルはサイトで扱うmeta情報や基本情報をjson形式で保持しています。

{
"name": "サイト名",
"description": "サイト概要",
"keywords": "キーワード1, キーワード2",
"rootUrl": "//example.com/",
"ogpImage": "//example.com/images/og-image.jpg",
"favicon": "//example.com/images/favicon.ico"
}

同梱のpugファイルにて、必要箇所で読み込まれているので、新たにプロジェクトを作成した場合は、このファイルの内容をサイトに合わせて書き換えてください。

pugに関して

冒頭で少し書き方に触れましたが、記述についてのルールがあるので、ご紹介します。

ネスト（入れ子）

ネストにはインデントを使います。タブ送りでもスペース区切りでも構いませんが、ファイル内でルールを統一しなければエラーになります。

div.contents
h1.contents_ttl 見出し
p.contents_p 本文

<div class="contents">
<h1 class="contents_ttl">見出し</h1>
<p class="contents_p">本文</p>

改行とインデントを省略するには : を使います。

ul
li: a(href="#")
li: span テキスト

<ul>
<li><a href="#"></li>
<li><span>テキスト</span></li>

改行 |

p 本文が
br
| 入ります。

<p>本文が<br>
入ります。
</p>

id,class # .

div#contents.contents
h1.contents_ttl 見出し
p.contents_p 本文

<div id="contents" class="contents">
<h1 class="contents_ttl">見出し</h1>
<p class="contents_p">本文</p>

属性 （）

img(src="/images/leopard.jpg")
<img src="/images/leopard.jpg">

コメント //

// htmlに出力するコメント
//- Pugのみで表示する、htmlには出力しないコメント
<!-- htmlに出力するコメント -->

タグに直接スタイルを書く場合

タグ(style={})と書きます。

p(style={
color: "red",
"font-weight": "bold"})
| pタグです

<p style="color:red;font-weight:bold;">pタグです</p>

エスケープ処理 & < > に関して

エスケープが必要な文字列 & < > は タグ= “” を利用することでエスケープ処理されます。

p= "& < >"
<p>&amp; &lt; &gt;</p>

ファイルのインクルード

ページごとに共通となるパーツをテンプレートファイルとして作成し、それを読み込むことで同じパーツを全てのページに作る必要がなくなります。

(_hoge.pug)

p hoge

(index.pug)

include _hoge.pug

index.html

<p>hoge</p>

ファイルのエクステンド（継承）

インクルードと似ていますが、ページごとにパーツは共通しているが、テキストなど一部ページによって異なる場合に利用します。

(_fuga.pug)

header.header
block h1

(index.pug)

extend _fuga.pug
block h1
h1 タイトル

(page.pug)

extend _fuga.pug
block h1
h1 ページタイトル2

(index.pug)

<header class="header">
<h1>タイトル</h1>
</header>

(page.html)

<header class="header">
<h1>ページタイトル2</h1>
</header>

mixin(ミックスイン)

include同様異なるパーツを読み込みますが、ファイル全体ではなく、パーツ毎に読み込みを行うことが出来ます。また別ファイルではなく同一のファールに書き込んでも利用することが出来ます。

(_mixin.pug)

include _mixin.pug

doctype html
html
head
body
+gnavi
+data

(index.pug)

mixin gnavi
ul.p-gnavi
li: a(href="index.html") TOP
li: a(href="page1.html") page1
li: a(href="page2.html") page2

mixin data
dl.p-data
dt.p-data__title Aのデータについて
dd.p-data__description データAに関する説明です

(index.html)

<!DOCTYPE html>
<html>
<head>
<body>
<ul class="p-gnavi">
<li><a href="index.html">TOP</a></li>
<li><a href="page1.html">page1</a></li>
<li><a href="page2.html">page2</a></li>
</ul>
<dl class="p-data">
<dt class="p-data__title">Aのデータについて</dt>
<dd class="p-data__description">データAに関する説明です</dd>
</dl>
</body>
</head>
</html>

変数

pugでは変数を扱うことが出来ます。

- var title = "変数です";
doctype html
html
head
title #{title}
body

<!DOCTYPE html>
<html>
<head>
<title>変数です</title>
<body></body>
</head>
</html>

if文

条件に応じて出力を変更するなど、他のプログラム言語のif文と同様の機能になります。

- var title = "タイトル"
doctype html
html
head
if title
title #{title}
else
title タイトル無し
body

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<body></body>
</head>
</html>

もし変数titleに値がない場合は、出力されるindex.htmlのタイトルタグの中身にはタイトル無しが入ります。

ループ処理

同じ内容の繰り返えす時はループ処理を使うと一回の記述で済ませることが出来ます。

ul.p-list
- for ( var i = 1; i < 5; i++ ) {
li(class="p-list__item" + i) テキスト
- }

<ul class="p-list">
<li class="p-list__item1">テキスト</li>
<li class="p-list__item2">テキスト</li>
<li class="p-list__item3">テキスト</li>
<li class="p-list__item4">テキスト</li>
</ul>

pugは色々便利な機能が揃っているので記法を覚えるとかなり便利です。
Jadeの頃に一度触った時はインデントでの整形に慣れなかったのですが、pugにして何回か使ってるうちにそれにも慣れてしまって、今はこっちのほうが書きやすいと感じています。

Sass (Scss) に関して

こちらについては過去記事 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 を参照ください。

ブラウザーシンクに関して

開発用のソースファイルと、各種端末のブラウザをシンクさせることができます。

例えば、PC、スマートフォン、タブレットのサイトコーディングを行っている場合、通常であれば

ファイルの保存→PCでプレビューの表示→スマートフォンで表示→タブレットで表示

といったフローが発生し、ソースファイルに更新をかければ、すべての端末でリロードを行う必要があります。

ブラウザーシンクはこの一連の動作をオートで行うことが出来、各端末でページを表示していれば、ソースファイルを保存した際、全ての端末が自動でリロードされます。

更に、すべての端末がシンクしているので、どれかの端末で画面をスクロールすれば、すべての端末でブラウザがスクロールされます。

細かなコードの修正が何度も発生する場合、この機能はすごく重宝します。

ただ、これを実現するには、同一のネットワークでつながっていることと、URLのアクセスをブラウザーシンクが指定するipアドレスでアクセスする必要があります。

具体的にどういうことが出来るかは動画でみたほうが感覚がつかみやすいと思います。おそらく便利さを確認することが出来るかと思います。

BrowserSyncデモ:鹿野壮 さん作

最後に

気になる点や改善要望等ありましたら、GitHubのissuesへ書き込んだり、プルリクエストいただけると凄く励みになります。

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share

PR

Related

Comments

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です