設計・実装を高速化!フロントエンド開発を自動化する「gulp.js」CSS2014年11月15日フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。gulp.jsとは?「Node.js」というjavascriptを利用して実装されたビルドシステムです。ビルドツールを導入することで、フロントエンド設計時に行う様々なタスクを自動化・高速化することができます。今後、フロントエンドエンジニアとして生き残るにはビルドツールの習得が不可欠となりますので、今のうちに身に付けておくことをお勧めします。※既に募集要項に必須スキルとして掲載している制作会社もありますgulp.jsを導入することで便利になることgulp.jsを導入することで、以下のような設計/実装時に発生する様々なタスクを自動化することが可能になります。複数ファイルを1ファイルに結合ブラウザの自動リロード(俗にいうライブリロード)etcそれでは、gulp.jsの導入についてご紹介いたします。Windows環境での手順となります。本記事では、以下のタスクを自動化するところまでをゴールとします。Sassを利用したcss設計css3利用時のベンダープレフィックス付与cssの圧縮jsの圧縮ライブリロード1.rubyをインストールSassを使うには、rubyの環境が必要となります。rubyをインストールしましょう。RubyInstallers「RubyInstallers」内の最新版をダウンロード/インストールしてください。※PCが64bitの方は(x64)と表記のあるリンクをクリックインストールの際、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを入れてインストールしてください。2.Sassをインストールターミナル(コマンドプロンプト)※を起動し、以下のコマンドを実行します。sass※以下、ターミナルと表記します※デスクトップ左下にあるWindowsボタンをクリックし、検索窓に「cmd」でターミナルが起動します少し時間がかかります。待つとインストールが完了します。3.Node.jsをインストール次に、以下のページよりNode.jsをダウンロードします。Node.js※「INSTALL」からダウンロード/インストールしてくださいインストールが終わったらターミナルから以下のコマンドを実行し、Node.jsがインストールされているかを確認します。-v以下のような文字列が出力されればインストールは成功です。v0.10.324.gulp.jsをインストール次に、いよいよgulpをインストールします。ターミナルで以下のコマンドを入力してください。gulpさらに、gulpを使用するディレクトリにgulpをインストールします。ターミナルで以下のコマンドを入力してください。D:\gulp_test\※インストールするディレクトリを移動(指定)しています※D~はサンプルとなりますので、各々任意の場所を入力してください※インストールするディレクトリは予め作成しておいてくださいインストールするディレクトリに移動したら、以下のコマンドを入力します。gulpこれでgulpがインストールされました。以下のコマンドでインストールされたことを確認しましょう。-v以下の様な文字列が出力されればインストールは成功です。3.8.9指定したフォルダに「node_modules」というフォルダが作成されていると思います。5.プラグインをインストール以下のタスクを自動化するため、いくつかのプラグインをインストールします。自動ローカルサーバライブリロード以下のコマンドを入力してください。今回必要なプラグインを一括インストールします。browser-sync「node_modules」以下に、プラグインのフォルダが追加されていることを確認してください。gulp-pleeease(ベンダープレフィックス付与、cssを圧縮)gulp-plumber(エラーが起きてもファイル監視をやめない)gulp-ruby-sass(Sass/cssを利用可能に)gulp-uglify(jsの圧縮)browser-sync(自動ローカルサーバ、ライブリロード)6.gulpfile.jsを作成gulpでは、自動化するタスクを「gulpfile.js」でコントロールします。以下のソースを「gulpfile.js」というファイルでD:\gulp_test\に作成してください。{gulp.watch('sass/*.scss',['sass']);//監視対象のscssファイルgulp.watch(['js_dev/*.js'],['js']);//監視対象のjsファイル});7.gulpの動作確認用ファイルを準備ここまでくればあとひと踏ん張りです。D:\gulp_test\js_dev\に「hoge.js」を以下のソースで作成してください。{alert('ほげほげ');});})();D:\gulp_test\sass\に「basic.scss」を以下のソースで作成してください。"utf-8";body{background:#333;.hoge{text-align:left;width:300px;display:flex;}}D:\gulp_test\に「hoge.html」を以下のソースで作成してください。src="/js/hoge.js"></script></head><body><h1>Gulpテスト</h1><p>ほげほげほげほげほげほげほげほげほげほげ</p></body></html>これでGulpを動作させる準備が一通り整いました。ターミナルでD:\gulp_test\まで移動し、以下のコマンドを入力してください。gulpgulpfile.jsで定義した"default"のタスクが実行され、自動的にhoge.htmlがブラウザに表示されます。あわせて、ライブリロード/scssの監視/jsの監視が始まります。試しに、sass/basic.scssやjs_dev/hoge.jsを編集して保存してみましょう。自動的にcss/basic.cssや/js/hoge.jsが圧縮された形で出力されます。basic.cssを確認すると、ベンダープレフィックスも自動的に付与されています。scssやjsの保存に反応してブラウザが自動的にリロードされるようになります。ターミナルでどんな処理が行われているかを確認することができます。8.まとめいかがでしたでしょうか。個人的にはgulpのほうが同じビルドツールであるgruntよりも処理が軽快で、カスタマイズも容易なのでお勧めです。本記事でご紹介した機能以外にも、gulpは様々な処理を自動化することができます。最初の学習はそこそこ敷居が高いかもしれませんが、まだまだ可能性が広がっていくツールですので、初期導入の際に本記事がご参考になれば幸いです。ため、即時には反映されません。