便利なgulp.jsの導入方法シェアtweetGoogle+はてブgulp(ガルプ)導入で開発環境の高速化web制作では昨今欠かせないタスクランナーの1つ「gulp.js」(以下、gulp)を導入しました。ビルドツールではGruntが人気で、ずっと導入しようと思っていたけど、いつの間にか「今ならgulp.jsでしょ」みたいな流れになってきていたので、gulpを導入してみることにしました。gulpとは?まずはじめにgulpについてですが、こちらは基本的にはGruntと同じ、「Node.js」で開発されているタスクランナーの1つです。(画像はNode.jsサイトの画面です。)主にSass/CompassやLess、CSS/JS圧縮、画像圧縮などのタスクを自動で行ってくれるビルドツールです。最近、制作現場ではコンパイルを必要とするケースはとても一般的です。Sassを編集する度にコンパイルを実行したりとか、画像編集する度に結合圧縮したりなど、一つひとつのコマンドを手作業で実行するのは少し面倒です。gulpはそんな面倒くさがりでも、さらに楽ができるものになっています。(楽をしていると言うと語弊がありますが、手作業の時間を限りなく削り効率化させることは、より他の工程に割く時間を生むので当然のことですよね。)gulpはGruntとできることはほとんど同じだと言われていますが、Gruntに比べつかいやすい点がいくつかあると言われています。(例:GruntはJSON形式の記述方法で少し扱いづらいイメージがあるのに対し、gulpはJavascriptで記述可のため、デザイナーでも扱いやすい。Gruntは基本は同期処理であるのに対し、gulpは非同期処理のため処理時間を短縮できる。)gulp導入方法まずはじめに、GruntもgulpもNode.jsをベースに開発されているため、Node.js本体のインストールが必要となります。作業環境にNode.jsがインストールされていない場合は、まずNode.jsをインストールしてください。1、Node.jsをインストールするNode.js公式サイトまずは公式サイトよりNode.jsのインストーラーをダウンロードして手順に従いインストールしてください。インストールされたかどうかの確認は、コマンドラインでNode.jsのバージョン表示で確認してください。2、gulpをインストールするNode.jsのインストールが完了したら、次にgulpをnpmからインストールします。以下を、コマンドラインに入力しインストールしてください。gulp※Mac環境でインストール中にエラーが発生する場合は先頭にsudoを付け足し管理者権限で実行してください。npmのバージョンが古いとこれもインストール中にエラーになるらしいので、事前にnpmのバージョンもアップデートしておきましょう。npm」ローカル環境でもインストールしておくNode.jsでは、-gオプションを付与せずインストールすると、グローバル環境ではなくローカルのフォルダ内にモジュールが保存されます。そのためローカル環境のプロジェクトフォルダ以下でも使えるようにしたいため、ローカル環境にもgulpをインストールしておく必要があります。そのためには以下のようにコマンドを入力しインストールします。LAB3、package.jsonを作成するこちらは基本的なNode.jsの使い方として、プロジェクトに必要な設定はあらかじめpackage.jsonというファイルに記述します。package.jsonファイルの作成は以下の通りです。プロジェクトのルートフォルダにコマンドラインで移動します。C:¥Users¥ユーザー名¥プロジェクトフォルダ名ルートフォルダに移動したら、以下のコマンドを実行します。initそうすると、プロジェクトの設定情報について以下のようにいろいろ聞かれますので、適当に記述します。特筆することがなければ、とりあえずすべてそのままで構いません。ライセンス(BSDやMITなど)すべてが完了しますと、ルートフォルダに以下のようなpackage.jsonファイルが作成されます。}}作成後にファイルを弄くる場合は、行末のカンマに注意してください。4、プロジェクトに合わせて必要なプラグインをインストールするただgulpをインストールしただけではコンパイル機能などを持ちませんので、プロジェクトに合わせて必要なプラグインをインストールしていきます。ファイルのリネームgulpのプラグインはたくさん公開されています。プラグインについては以下公式サイトより検索できます。公式サイトgulp.js公式サイトプラグイン一覧インストールは以下のようにコマンドでインストールができます。--save-dev上記のように「–save-dev」とコマンドを入力することでインストールしたプラグインが自動的にpackage.jsonに追記されます。--save-dev以下のようにpackage.jsonに追記されます。}}※バージョンは記事執筆時のバージョンです。このようにしてプロジェクトに合わせて必要なプラグインをインストールしていきましょう。5、gulpfile.jsという設定ファイルを作成するここにきてようやく具体的なgulpの動かし方について触れていきます。gulpは基本的に、設定ファイルにJavascriptでタスクを記述して実行させますここでは例で、以下のような「gulpfile.js」という設定ファイルを作成してみます。実行するプラグインを指定します。任意のタスク名を登録します。タスク名と、実際に実行される処理を記述します。タスク処理の対象となるファイルを指定します。カンマ区切りで複数指定できます。その他以下のような記述で対象を変更できます。実行する処理を記述します。pide()は処理をいくつでもつなげることができます。処理を実行したファイルを出力する場所を指定します。6、gulpfile.jsで設定したタスクを実行するgulpfile.jsで設定したタスク名を記述し、コマンドラインで実行します。style上記のようにコマンドを実行することによって、gulpfile.jsで設定したタスクが実行されます。これによって、今まで一つひとつ実行していたコンパイルや圧縮などといったタスクをまとめて実行することができます。以上でgulpの基本的な使い方は完了です。このままでもいいのですが、さらに便利な機能がgulpにはあります。それがwatchというファイル監視の方法です。watchでファイル更新を監視し、更新があった場合処理を自動で実行する上記解説のままでは、プロジェクトファイル内で処理対象ファイルの更新があった場合に、その都度コマンドラインでコマンドを実行しなければいけません。これでは少し面倒です。そのためさらに作業を簡略化するために、ファイルが変更・追加など更新されたタイミングでタスクを自動で実行してくれるwatch機能というものがあります。上記までの例にwatch機能を加えて見ます。{//cssフォルダ以下のファイルを監視するgulp.src('css/*.css')//cssフォルダ以下の拡張子が.cssのファイルを対象.pipe(minifyCss()).pipe(gulp.dest('min_css'));});});上記の場合は、gulp.watch('監視するファイル名')監視するファイルを指定し、その対象内で何らかの更新があった場合、自動でタスクを実行します。あとはコマンドラインで同様に、以下のようにコマンドを実行しておけば完了です。Ctrl+C同時押しで監視を終了させます。前後の記事OpenSSLでサーバーの秘密鍵とCSR作成手順。最近アクセスの多い記事Illustrator不要。ネタ、下ネタ...何でも書きます。きなもの、映画、ラーメン、寝ること。高木りさデザイナー/ライター。WEBデザインに関する記事を書いてます。