Edited at

gulpを始める。gulp設定ファイルはcoffeescript(gulpfile.coffee)で書く gulp 3.8以降

More than 3 years have passed since last update.


gulp設定ファイルをcoffeescriptで書く


node.js、npmインストール後

環境

node -v

v0.10.35

npm -v

1.4.28

gulp -v

3.8.10

(gulpのversion3.7ぐらいからcoffeescriptに対応したようです。(未確認))



事前知識

npm install --save-dev gulp

↓短縮形

npm i -D gulp

このコマンドはgulpの設定ファイルにプラグインを使えるように書き込むコマンド。



最初

まずはプロジェクトフォルダを作りそこの中に入り、npmを初期化する。

npm init

package.jsonファイルが作られる

npm i -D gulp

gulpコマンドが使えるようになる

npm i -D coffee-script

gulpでcoffeescriptが使えるようになる


gulpをcoffeescriptの形式で動かす。


単純なタスクを書いて動くかを確認してみる。

gulpfile.coffeeを作成する


gulpfile.coffee


gulp = require 'gulp'

gulp.task 'default',->
gulp.src './from/*'
.pipe gulp.dest './to/'



タスクの説明

fromフォルダ内の全てのファイルをtoフォルダ内へ移動する。


タスクの実行前準備

fromフォルダを作り、その中に適当なファイルを入れる。


タスクの実行

端末からgulpと入力して実行。

fromフォルダ内のファイルがtoフォルダ(自動生成される)に移動した事を確認する。

toフォルダを削除して、もう一度gulpと実行しても同じようになることを確認。


この行はgulpコマンドのデフォルト動作を設定している。


gulpfile.coffee(一部)

`gulp.task 'default',->`




デフォルトのコマンドと特定のコマンドを分けてみた。



gulpfile.coffee


gulp = require 'gulp'

gulp.task 'default', ->
gulp.run 'test'

gulp.task 'test', ->
gulp.src 'from/*'
.pipe gulp.dest 'to'


./from/*from/*に変えても賢く判断してくれる。

後は、下の参考リンクをみて便利な機能を追加していく。


参考リンク

Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG

http://liginc.co.jp/web/tutorial/117900

これからはじめるGulp.js(全俺) Advent Calendar 2014 - Qiita

http://qiita.com/advent-calendar/2014/gulpjs