gulp入門その１―とりあえず動かすところまで

2015/01/16: atsuko.a

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)

去年の11月辺りから、メインマシンがWinからMacに変わりました。
Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、

メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。
今回は、簡単なタスクを登録して動かすところまで。
その２で、ファイルの監視や同期処理などを覗いていきたいと思います。

タスクランナーってなに？

メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に

（´-）.｡oO（いっちょ最近流行りのタスクランナーでも入れてみようかね…）


と思い立った次第です。

大学時代のトラウマから黒い画面はあまり好きではないのですが、そうも言ってられないのでリハビリも兼ねて。
そもそもタスクランナーとは繰り返し行う処理を予め登録しておいて、必要なときに簡単に呼び出し・実行できるようにしようぜ！といった趣旨の自動化ツールです。

その呼出タイミングも、

手動で呼び出す
特定のファイルが変更・保存されたら
特定のコマンドが実行されたら
処理Aが終わったら、処理Bへ自動的に移行する

などなど、様々設定できます。便利ですね。
Gruntとgulp
さて、CSSプリプロセッサにSassとLess（他にもいろいろありますが）があるように、タスクランナーにもいわゆる有名ドコロ的なものがあります。

それがGruntとgulpです。
どちらもnode.jsを元に動いています。

両者の違いは一般的にこんな感じ。




Grunt
gulp




タスクの書き方
複雑
簡単


処理速度
遅い
早い


プラグインの量
多い
少ない



簡単に言うと、gulpはちょっと書きやすくなったGruntの後続、って感じでしょうか。

今回は単純に社内で使っている人が居なかったのでgulpにしてみました。（Gruntは居たので比較したかった）
最近ではgulpのプラグイン量も増えてきていて、書きやすいこともあり「１から始めるならgulp」という風潮もあるとか、無いとか。とか。
必要なものを準備する
前述のとおりnode.jsで動いているのでnodeが必須です。

それ以外は、用途に合わせて必要な物を入れていくとよいでしょう。

gulpは単体では単に粛々と登録されたタスクをこなす程度なので、いろいろなことをさせたい場合はプラグインが必須になります。
これより下はMacでの記事になります。

基本的な方法はWin/Mac変わりませんが、実行の際のコマンドが異なります。

Winユーザーは適宜コマンドをWinに置き換えてください。
node.jsを入れる
node.jsを落としてきます。

http://nodejs.org/

トップにある「INSTALL」からでも、下層のダウンロードからでも落とせます。

インストーラを起動した後は、何も気にせずポチポチしていけばよいと思います。（気にならなければ）

黒い画面で


		
		
			
			

			
			$ node -v
			
				
					
				
					1
				
						$ node -v
					
				
			
		

と実行して、バージョンが出ればインストール完了。
グローバルにgulpを入れる
node.jsのパッケージマネージャに、npmというものがあるのでこれを使ってパッケージを落としてきましょう。


		
		
			
			

			
			$ npm install -g gulp
			
				
					
				
					1
				
						$ npm install -g gulp
					
				
			
		

うまくいかない場合は「$ sudo npm install -g gulp」で実行すると、管理権限での実行になるのでよいかも。

こちらも


		
		
			
			

			
			$ gulp -v
			
				
					
				
					1
				
						$ gulp -v
					
				
			
		

でバージョンが出れば完了。
作業用ディレクトリにgulpを入れる
上の項では、グローバルにgulpを入れました。

実際使用する際には、作業するディレクトリ（プロジェクトのディレクトリ）直下にgulpをインストールする必要があります。

まず、作業ディレクトリに移動します。


		
		
			
			

			
			$ cd [作業ディレクトリまでのパス]
			
				
					
				
					1
				
						$ cd [作業ディレクトリまでのパス]
					
				
			
		

そこでgulpをインストール。


		
		
			
			

			
			$ npm install gulp --save-dev
			
				
					
				
					1
				
						$ npm install gulp --save-dev

	Grunt	gulp
タスクの書き方	複雑	簡単
処理速度	遅い	早い
プラグインの量	多い	少ない

途中で、プロジェクト名やら色々訊いてきますが基本スルー（Enter）で大丈夫。この項目はあとで変えられます。（後述）これで、該当ディレクトリにgulpがインストールされました、やっほいヽ(=´▽=)ﾉ

その他プラグインを入れる

前述のとおり、gulpでちょっと凝ったことをしようと思うとプラグインが必須になります。
ここでもnpmを使ってダウンロードしていきます。

インストールしたいプロジェクト直下（gulpが入っているところ）にて

$ npm install [プラグイン名] --save-dev
 
// ex
$ npm install gulp-ruby-sass --save-dev

$ npm install [プラグイン名] --save-dev

// ex

$ npm install gulp-ruby-sass --save-dev

を実行すればOKです。
http://gulpjs.com/plugins/
ここからプラグインを検索することができるので、気に入ったものを探してみるのも楽しいです。

package.jsonってなに？

プロジェクト毎にプラグインを入れると、新規プロジェクトの時に1から全部入れるの面倒じゃない？
って思っていたのですが、どうやらそうでもないようです。
gulpをインストールしたディレクトリに、package.jsonというファイルが生成されていてこれを利用することで他のプロジェクトにも転用できるようです。
package.jsonの中身はこんな感じ。（一例です）

{
  "name": "[プロジェクトの名前]",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[gitのレポジトリURL]"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": { // プラグイン一覧
    "gulp": "~3.8.10",
    "gulp-cssmin": "~0.1.6",
    "gulp-styledocco": "0.0.1",
    "gulp-autoprefixer": "~2.0.0",
    "gulp-imagemin": "~2.0.0",
    "gulp-ruby-sass": "~0.7.1",
    "gulp-plumber": "~0.6.6",
    "gulp-replace": "~0.5.0",
    "run-sequence": "~1.0.2",
    "gulp-run-sequence": "~0.3.2"
  }
}

{

"name": "[プロジェクトの名前]",

"version": "0.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"repository": {

"type": "git",

"url": "[gitのレポジトリURL]"

"author": "",

"license": "ISC",

"devDependencies": { // プラグイン一覧

"gulp": "~3.8.10",

"gulp-cssmin": "~0.1.6",

"gulp-styledocco": "0.0.1",

"gulp-autoprefixer": "~2.0.0",

"gulp-imagemin": "~2.0.0",

"gulp-ruby-sass": "~0.7.1",

"gulp-plumber": "~0.6.6",

"gulp-replace": "~0.5.0",

"run-sequence": "~1.0.2",

"gulp-run-sequence": "~0.3.2"

}

プラグインのインストールの際に「--save-dev」を付けることで、devDependencies部分に自動追記されるようです。便利。
ちなにに、プロジェクトの初期設定はここから変更できます。

これでひと通り必要な物は揃ったので、実際に動かしてみたいと思います。

タスクを書いて、実行しよう

タスクを書く

まず、タスクを設定してみます。
新規でgulpfile.jsというファイルを作成し、そこに記述していきます。
保存場所はpackage.jsonと同じように、作業ディレクトリ直下に。
一行目に

var gulp = require('gulp');

1	var gulp = require('gulp');

と書いてあげれば準備完了です。

基本的にタスクは、

var 適当な変数名 = require('プラグインの名前');
 
gulp.task('タスクの名前', function() {
  gulp.src(対象ファイルをMiniMatchパターンで指定)
    .pipe(適当な変数名()) // プラグインの処理を呼びだす
    .pipe(gulp.dest(出力先));
});

var 適当な変数名 = require('プラグインの名前');

gulp.task('タスクの名前', function() {

gulp.src(対象ファイルをMiniMatchパターンで指定)

.pipe(適当な変数名()) // プラグインの処理を呼びだす

.pipe(gulp.dest(出力先));

});

こんな感じで定義できます。.pipe()で処理をつなげていくイメージ。
MiniMatchパターンとは、node.jsで使われるpath match用のライブラリです。
検索すると色々引っかかってきますが、個人的にはこちらを参考にさせて頂きました。
minimatch（node.js で path match するライブラリ）のチートシートを作った

今回はgulp-ruby-sassを使って、sassのコンパイルをするタスクを書いてみます。
※事前にsassが入っていることが前提になっています。

var rubySass = require('gulp-ruby-sass');
 
gulp.task('sassCompile', function() {
  gulp.src('./sass/*.scss')
    .pipe(rubySass({ // コンパイルのオプション
      sourcemap: ture,
      sourcemapPath: './sass/',
      style: 'expanded'
    }))
    .pipe(gulp.dest('./css/'));
});

var rubySass = require('gulp-ruby-sass');

gulp.task('sassCompile', function() {

gulp.src('./sass/*.scss')

.pipe(rubySass({ // コンパイルのオプション

sourcemap: ture,

sourcemapPath: './sass/',

style: 'expanded'

}))

.pipe(gulp.dest('./css/'));

});

詳しいオプション等はこちらからドウゾ→gulp-ruby-sass
ちなみに、gulp-sassというプラグインもありますが、こちらはnode-sassが必要になります。

これで、sassCompileという名前のタスクが設定出来ました。

タスクを実行する

実際にタスクを動かしてみましょう。

ターミナルから

$ gulp タスクの名前

1	$ gulp タスクの名前

とすることで、該当のタスクを実行できます。
なので、先ほどのタスクは

$ gulp sassCompile

1	$ gulp sassCompile

としてあげればOK！

まとめ

ひとまず、gulpを動かすところまで出来ました！
しかし、sassのコンパイル等はファイルの変更があったら自動的にコンパイルして欲しいですよね(´・ω・`)
なので、次回は

ファイルを監視する
処理を同期的にする
その他細かいこと

なんかを書ければいいかなぁ、と思っています。

ざざっとですが、触ってみるとタスクの書き方は結構簡単でした。
というかわかりやすい。
gulpのプラグインも増えてきているので、いろいろ漁って環境を整えていくと気持ちいいですね。
それでは今日はこのへんで！

Category：コーディング ,タスクランナー ,効率化

CREATOR BLOG

gulp入門その１―とりあえず動かすところまで

もくじ

タスクランナーってなに？

Gruntとgulp

必要なものを準備する

node.jsを入れる

グローバルにgulpを入れる

作業用ディレクトリにgulpを入れる

その他プラグインを入れる

package.jsonってなに？

タスクを書いて、実行しよう

タスクを書く

タスクを実行する

まとめ

この記事を書いた人

Recent Entry

Category

Archive

Link

もくじ

タスクランナーってなに？

Gruntとgulp

必要なものを準備する

node.jsを入れる

グローバルにgulpを入れる

作業用ディレクトリにgulpを入れる

その他プラグインを入れる

package.jsonってなに？

タスクを書いて、実行しよう

タスクを書く

タスクを実行する

まとめ

この記事を書いた人

関連する記事

Recent Entry

Category

Archive

Link