Web制作を行う全ての方へ

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

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

GitHub:speedy

何が出来るのか?

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

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

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

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

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

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

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

Speedyの使い方

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

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

  • Node.js
  • Gulp

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

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

画面に 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 というもので管理されていて、それを利用してインストールします。

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

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

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

Speedyの設定

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

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

/example/speedy

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

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

Gulpを起動するには

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

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

を行います。

ディレクトリ構成

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

開発時は基本的に

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

を触ることになります。

site.jsonに関して

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

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

pugに関して

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

ネスト(入れ子)

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

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

改行 |

id,class # .

属性 ()

コメント //

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

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

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

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

ファイルのインクルード

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

ファイルのエクステンド(継承)

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

mixin(ミックスイン)

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

変数

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

if文

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

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

ループ処理

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

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

Sass (Scss) に関して

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

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

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

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

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

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

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

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

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

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

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

BrowserSyncデモ:鹿野壮 さん作

最後に

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

Ad



Comments

コメントを残す

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