コーディングメソドロジー

第78回 Web制作の効率化にgulp.jsを導入しよう

近年Web制作の現場では、SassのようなCSSプリプロセッサを使用したり、スライスした画像を圧縮したり、スプライト画像を生成したりという作業を行うことが多くなってきました。オンラインツールやアプリを使用し手作業で変換作業を行うこともできますが、どうしても手間と時間がかかってしまいます。そのような煩雑な作業のサポートを自動的・機械的に行ってくれるのがビルドツールです。その中でも、最近よく耳にするgulp.jsをご紹介します。

■gulp.jsとは

gulp.jsとはnode.js上で動作するタスクを自動化をするためのビルドツールです。できることは豊富にあり、主なものでも①Sass、CoffeeScript、Jadeなどのコンパイル ②コードの圧縮(minify化)、画像の圧縮 ③ソースコードの監視等が可能です。特にSassのコンパイルや画像の圧縮はWeb制作の中でも特に工数が増える作業ですので、自動化することによって楽に制作を行うことができるかと思います。

■環境準備について

gulp.jsをインストールする前に、node.jsのインストールを行います。node.js公式サイトからインストーラーを介して簡単にインストールする方法もありますが、nodebrewというnode.js管理ツールを使用すると、プロジェクトごとに任意のバージョンのnode.jsをインストールできるため、こちらの方法をオススメします。

node.jsのインストールが完了したら、グローバル環境とローカル環境(実際に制作を行うディレクトリ)のぞれぞれにgulp.jsをインストールします。グローバル環境ではnpm install -g gulpローカル環境ではnpm install gulp --save-devでインストールし、 package.jsonも作成しておきます。

gulpfile.js

■gulpfile.jsについて

package.jsonと同じディレクトリにgulpfile.jsを作成します。
実際に自動化して行うタスクの内容はgulpfile.jsに記載していきます。
また、必要なプラグインをプロジェクトごとにインストールします。

今回はSassをコンパイルするためにgulp-sassというプラグインをインストールします。

コマンドは、npm install gulp-sass --save-devです。

gulp.task("タスク名",function(){〜});
でタスクの登録をします。
gulp.src("ディレクトリ名・ファイル名")
で読み込むファイルを指定します。
gulp.dest("出力先ディレクトリ名")
でSassをコンパイルしたcssファイルの出力ディレクトリを指定します。

また、.pipe()で各処理を連結することができます。この場合は指定先のsassファイルを読み込み、コンパイルし、指定したディレクトリにcssファイルを出力するというタスクとなります。
タスクを実行する場合はコマンドラインでgulp sassと入力することで実行できます。また、単にgulpと入力することでgulp-sassを含めたすべてのタスクを実行できます。

ただし、このままだと、変更の度にコマンドを入力してコンパイルし直さなければなりません。
そのため、実際の案件では、gulp.watchメソッドを使用してSassファイルを監視し、変更がある度に指定したタスクを自動実行するようにしておきます。「コンパイルを行ってCSSファイルを上書きしブラウザ更新を行う」というタスクにしておくと、作業を効率化できるでしょう。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム