<プロが教えるコーディング>Web制作の効率化にgulp.jsを導入しよう | 東京IT新聞

<プロが教えるコーディング>Web制作の効率化にgulp.jsを導入しよう

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1848案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

 近年Web制作の現場では、SassのようなCSSプリプロセッサを使用したり、スライスした画像を圧縮したり、スプライト画像を生成したりという作業を行うことが多くなってきました。

 オンラインツールやアプリを使用し手作業で変換作業を行うこともできますが、どうしても手間と時間がかかってしまいます。

 そのような煩雑な作業のサポートを自動的・機械的に行ってくれるのがビルドツールです。そのなかでも、最近よく耳にするgulp.jsをご紹介します。

       ■■■ gulp.jsとは  node.js上で動作するタスクを自動化するためのビルドツールです。できることは豊富にあり、主なものでも  (1)Sass、CoffeeScript、Jadeなどのコンパイル        ■ (2)コードの圧縮(minify化)、画像の圧縮        ■ (3)ソースコードの監視 などが可能です。  特に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について  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ファイルを上書きしブラウザ更新を行う」というタスクにしておくと、作業を効率化できるでしょう。 
 今回の執筆担当者  丸山 智之(まるやま・ともゆき)  コーディングファクトリー  コーディングチーム コーダー
《株式会社モノサス》

特集

page top