Web制作を行う全ての方へ

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

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

Github:speedy

何が出来るのか?

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

pug

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

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

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

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

scss

.content {
  width: 100%;
  &_ttl {
    font-size: 2.0px;
  }
  &_p {
    font-size: 1.4px;
  }
}
css

.content {
  width: 100%; }
.content_ttl {
  font-size: 20px; }
.content_p {
  font-size: 14px; }

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

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

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

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

Speedyの使い方

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

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

  • Node.js
  • Gulp

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

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

 node -v 

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

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

  • NodeBrew
  • nvm
  • nodist

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

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

Gulpのインストール

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

 npm install --global gulp-cli 

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

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

 gulp -v 

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

Speedyの設定

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

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

/example/speedy

 cd /example/speedy 

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

 npm install 

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

Gulpを起動するには

 gulp 

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

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

 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に関して

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

ネスト(入れ子)

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

pug

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

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

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

pug

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

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

改行 |

pug

p 本文が
  br
  | 入ります。
html

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

id,class # .

pug

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

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

属性 ()

pug

img(src="/images/leopard.jpg")
html

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

コメント //

pug

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

<!-- htmlに出力するコメント -->

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

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

pug

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

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

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

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

pug

p= "& < >"
html

<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
テンプレートを読み込むファイル1
(index.pug)

extend _fuga.pug
  block h1
  h1 タイトル
テンプレートを読み込むファイル2
(page.pug)

extend _fuga.pug
block h1
  h1 ページタイトル2
テンプレートを読み込むファイル1の吐き出し
(index.pug)

<header class="header">
  <h1>タイトル</h1>
  </header>
テンプレートを読み込むファイル2の吐き出し
(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では変数を扱うことが出来ます。

pug

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

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

if文

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

pug

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

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

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

ループ処理

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

pug

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

<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へ書き込んだり、プルリクエストいただけると凄く励みになります。

Ad



Comments

コメントを残す

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