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

  • 23
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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