school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

ビルドツールのセットアップ

マルチデバイス サイトをゼロから構築します。ここでは、一連のビルドプロセス ツールを使用して、開発をスピードアップしたり、高速読み込みサイトを作成したりする方法について説明します。どのサイトにも開発バージョンと本番向けバージョンがあります。

開発バージョンには、作業しやすいクリーン形式のサイトを構成する HTML、CSS、JS、および画像ファイルが含まれています。

本番向けバージョンでは、これらのファイルを取得したり、縮小化したり、結合または統合したり、画像のように最適化したりします。

ウェブ デベロッパーは一度に多くのことを考える必要があり、ビルドステップは最も重要ですが、始めるのが面倒なものです。 画像圧縮、CSS の縮小化、JavaScript の結合、レスポンシブ テスト、単体テストなどを自動化 するために必要なすべてのタスクを処理する必要があります。

このガイドに従って、作成済みのサイトが開始時からすべてのベスト プラクティスに従うようにワークフローを構築するための最良の方法を習得してください。

TL;DR

  • ビルドプロセス ツールは、パフォーマンスを最適化するものである必要があります。つまり、JavaScript、CSS、HTML、および画像を自動的に縮小化および結合する必要があります。
  • LiveReload などのツールを使用して、開発プロセスをスムーズにします。

コーディングを始める前に、サイトの本番向けバージョンを最適化および構築する方法を検討する必要があります。 このワークフローを最初から設定すると、プロジェクトの終了時に予期しない状況になるのを防ぐことができます。また、単調なタスクを自動で実行して開発をスピードアップするツールをワークフローに追加できます。

ビルドプロセスとは

ビルドプロセスは、プロジェクト ファイルに対して実行される一連のタスクで、開発中にサイトの開発バージョンを作成するために使用されるコードをコンパイルしたりテストしたりします。 ビルドプロセスでは、開発ワークフローの終了時に実行する一連のタスクを実行しないでください。

ビルドプロセスを実装するための最も一般的なツールは GulpGrunt で、両方ともコマンドライン ツールです。 どちらも使用経験がない場合は、Web Starter Kit で Gulp が使用されているため、Gulp を使用することをお勧めします。

GUI を備えていて、取り組みやすいツールがありますが、柔軟性は低くくなります。

サポートされているプラットフォーム & ツール名
OS X / Windows Prepros
OS X CodeKit
OS X HammerForMac

ビルドプロセスに必要なタスク

次のセクションでは、ビルドプロセスに必要な最も一般的なタスクについて説明し、Grunt と Gulp での対応するタスクを説明します。

思いどおりの設定を実現するには多くの試行錯誤が必要であり、ビルドプロセスがはじめての場合は厄介な作業になることがあります。

ビルドプロセスの良い例については、Web Starter Kit でサイトをスタートをご覧ください。Web Starter Kit の使用方法と Gulp ファイル内の各コマンドの実行内容が説明されています。この方法を使用して、セットアップを手っ取り早く完了し、後から必要に応じて変更を加えることができます。

独自のビルドプロセスを作成する予定があり、Gulp または Grunt をはじめて使用する場合は、クイック スタート ガイドを参考にすると、最初のビルドプロセスのインストールや実行の方法がわかります。

連結と圧縮の使用によるサイトの高速化

連結および圧縮という用語に詳しくない方のために説明すると、連結とは、単純に複数のファイルを統合する、つまり、複数のファイルをコピーして 1 つのファイルに貼り付けることです。 これを行うのは、ブラウザでは多くの小さいファイルよりも 1 つのファイルを取得する方が効率的だからです。

圧縮は、ファイルを取得し、コードの動作を変えることなく全体の文字数を少なくするプロセスです。 良い例として、コメントの削除、長い変数名の短縮などがあります。 これにより、ファイルサイズが小さくなり、ダウンロードも速くなります。

圧縮には次を使用します。

ファイルの種類 Gulp Grunt
CSS gulp-csso grunt-contrib-cssmin
JS gulp-uglify grunt-contrib-uglify
HTML gulp-minify-html grunt-contrib-htmlmin

連結には次を使用します。

ファイルの種類 Gulp Grunt
CSS(Sass) gulp-sass または gulp-useref grunt-contrib-sass または grunt-usemin
JS gulp-useref grunt-usemin または grunt-codekit

: 「インポート」機能を利用すると Sass を使用できます(例は Web Starter Kit を参照)。

画像の最適化

画像の最適化は、サイトの高速化に役立つ重要なステップです。画像は、画質を落とすことなく驚くほど縮小できます。 メタデータは、ブラウザで画像の表示に必要ないため削除されます。たとえば、写真の撮影に使用されたカメラに関する情報などです。

画像を最適化するには、次のモジュールを使用できます。

Gulp & Grunt
gulp-imagemin grunt-contrib-imagemin

ベンダー プレフィックスを省略しない

使用する CSS にすべてのベンダー プレフィックスを含めるのは、面倒になることがよくあります。 必要なプレフィックスを自動的に追加する自動プレフィクサーを使用してください。

Gulp と Grunt
gulp-autoprefixer grunt-autoprefixer

: プレフィックスを自動的に追加する Sublime パッケージを追加することもできます。

テキスト エディタを LiveReload のままにしない

LiveReload は、変更が行われるたびにブラウザのサイトをアップデートします。一度使用すると、それなしの生活は考えられなくなります。

Web Starter Kit では、LiveReload をサポートするために browser-sync を使用しています。

Gulp と Grunt
browser-sync grunt-contrib-connect および grunt-contrib-watch

注: LiveReload の考えは好きでもビルドプロセスが不要な場合は、Addy Osmani の HTML5Rocks に関する記事をご覧ください。さまざまな代替手段が記載されています。