• 日本語
  • English
  • 中文
MENU
CREATE A PLATFORM FOR DIVERSITY
Web, Game, App, Illustration
https://monstar-lab.com/
gulp
2015/03/18
Gruntは飽きたのでGulpを試してみた

へっぽこコーダー井口です。GoogleがWeb Starter Kitに取り入れたことで盛り上がりが加速しているgulp.jsを試したいと思います。もうgruntは飽きましたしね。

gulp.jsってなに?

僕なりに説明するとgruntの設定の書き方とかもっとサクッとやれる子です。gruntと違い並行で実行されるのでタスクの完了は高速化されると言われていますが、必ずしも劇的に速くなるわけではありません。単体タスクではgruntのほうが速くなることもあります。並行処理自体はとても魅力的な機能なので、タスクの依存関係を考えながら適切に設定し、有効に活用してください。

まずはインストール

早速インストールしてみましょう。nodeは入っている想定で進めます。

npm install -g gulp

これだけです。

早速使ってみよう!

インストールしたからには使いましょう。まずは適当の作業フォルダを用意し、プロジェクトを作りましょう。

mkdir ~/Desktop/gulp_test
cd ~/Desktop/gulp_test
npm init

なにか聞いてきますが全部デフォルトでもよいです。package.jsonに必要なプラグイン入れていきましょう。

npm install --save-dev gulp

gulpfile.jsを作りましょう。

gulpfile.js

var gulp = require('gulp');
gulp.task('default', function(){
  console.log('---------- default task!! ----------');
});

gulpを実行しましょう。

gulp

[12:06:34] Using gulpfile ~/Desktop/gulp_test/gulpfile.js
[12:06:34] Starting 'default'...
---------- default task!! ----------
[12:06:34] Finished 'default' after 64 μs

このようになりました!ラクでいいですね!僕にとってはgruntよりも見やすいです。

ただし、jsだとどうしても{}等が増えてしまい見づらいのでcoffeeにします。gulpは可読性が売りのひとつなので、見やすいほどいいですよね。coffeeのインストールをしgulpに適用しましょう。

npm install --save-dev coffee-script
mv gulpfile.js gulpfile.coffee

gulpfileの中身をcoffeeに書き換えましょう。
gulpfile.coffee

gulp = require('gulp')

gulp.task 'default', () ->
  console.log('---------- default task!! ----------')

うん、見やすい。

実用編

先ほどの状態ではconsole.logでメッセージを出してるだけなので、ちゃんと実用的なことをやってみましょう。必要な機能に合わせてプラグインを入れてみます。今回はとりあえず、
– sass
– coffee
– ローカルサーバー立ち上げ
– livereload
– gulpのtaskの完了通知
をやってみようかと思います。ディレクトリ構成ですが、

gulp_test
├── gulpfile.coffee
├── node_modules
├── package.json
└── source
    ├── assets
    │   ├── coffee
    │   │   └── test.coffee
    │   ├── css
    │   │   └── test.css
    │   ├── javascripts
    │   │   └── test.js
    │   └── sass
    │       └── test.sass
    ├── index.html
    └── views
        └── index.html

このような感じにします。早速sassとcoffeeとindex.htmlをくらいは作ってしまいましょう。

mkdir source;mkdir source/assets;mkdir source/assets/sass;mkdir source/assets/coffee;mkdir source/views;touch source/index.html;touch source/assets/sass/test.sass;touch source/assets/coffee/test.coffee

必要なディレクトリとファイルはこれでできます。とりあえず出来るかと(適当)

Sass

`gulp-ruby-sass`を利用します。`gulp-sass`というgemもあるそうですがoptionはgulp-ruby-sassのほうが豊富なようです。今後どちらが主流になるのだろう。

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

coffee

`gulp-coffee`を使います。

npm install --save-dev gulp-coffee

サーバー立ち上げ & livereload

方法は色々ありますが、今回は`browser-sync`を使います。

npm install --save-dev browser-sync

この子は名前の通りブラウザを同期してくれます。scrollやinputのテキスト等も同期してくれるので、pcとスマホの同時デバッグができる等いろいろ便利です。

taskの完了通知

‘gulp-notify’を使います。いい子です。かわいい。

npm install --save-dev gulp-notify

完成品はこちら

gulp = require('gulp')
sass = require('gulp-ruby-sass')
coffee = require('gulp-coffee')
notify = require('gulp-notify')
sync = require('browser-sync')

# static server
gulp.task 'server', () ->
  console.log('---------- server task ----------')
  sync.init(null, {
    server:
      baseDir: './source'
  })

# reload
gulp.task 'reload', ()->
  sync.reload()

# sass
gulp.task 'sass', () ->
  console.log( '---------- sass task ----------' )
  gulp.src('source/assets/sass/**/*.sass')
    .pipe( sass({'style':'compressed' }) )
    .pipe( gulp.dest('source/assets/css') )
    .pipe( notify({message: 'Done Sass Task',onLast: true}) )
  return

# coffee
gulp.task 'coffee', () ->
  console.log( '---------- coffee task ----------' )
  gulp.src('source/assets/coffee/**/*')
    .pipe( coffee() )
    .pipe( gulp.dest('source/assets/javascripts') )
    .pipe( notify({message: 'Done Coffee Task',onLast: true}) )
  return

# watch
gulp.task 'watch', ['server'],->
  console.log( '---------- watch task ----------' )

  gulp.watch 'source/assets/sass/**/*.sass', () ->
    gulp.run('sass')

  gulp.watch 'source/assets/coffee/**/*', ()->
    gulp.run('coffee')

  # reload
  gulp.watch 'source/**/*.html', ['reload']
  gulp.watch 'source/**/*.css', ['reload']
  gulp.watch 'source/**/*.js', ['reload']

# default
gulp.task 'default',() ->
  console.log( '---------- default task ----------' )
  gulp.run('sass','coffee')

使い方は簡単で、「gulp」でsassとcoffeeをコンパイルします。「gulp watch」とすると勝手にブラウザが立ち上がります。ブラウザの同期やライブリロードもされているかと思います。

所感

間違いなくこれからもgulp.jsは盛り上がっていきます。
現時点でも大抵の機能がgulpのプラグインとして公開されており、gruntでやろうとしていたことはほとんどgulpでも可能かと思います。しかしgruntがなくなるかというと、そうも思いません。gruntがgulpを意識し、良い所を吸収していくかと思います。書き方についても好みの問題もあるので「どちらがよい」ではなく「どちらがプロジェクトにマッチしやすいか」で選ぶとよいでしょう。

モンスター・ラボでは新しい技術も積極的に取り入れ、効率のよい開発をやりたいフロントエンドエンジニアを強く募集しております!
「gulpなんてとっくにプラグイン書いてるから見てみろよ」
「俺がおまえらを指導してやるよ」
「東京でフロントエンドやりたいんだよぉ!」
そんな方は是非モンスター・ラボへお越しください。
楽しいフロントエンドライフをおくりましょう。

Archives