読者です 読者をやめる 読者になる 読者になる

UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

Gulpでフロントエンド開発を効率化しよう - Reactの開発に便利!

f:id:mochizuki_p:20161121044626j:plain

Gulpとは?

タスクランナーツール

ファイルの変換など、一連の作業を自動化できる便利なツール

ストリーム

Gulpの操作の基本となる概念で、Node.jsのファイルシステムを利用して、データの変換をメモリ上で実行して、最後にファイルに書き出す一連の流れのこと

Gruntとの違い

JavaScriptのタスクランナーには他にGruntがある。しかし、GruntよりGulpの方が、ファイル操作の流れが直感的で、分かりやすいと思う

Gulpを使う

最初にGulpを使うための作業用ディレクトリを作成してpackage.jsonを作成

mkdir gulp_test
cd gulp_test
npm init

Gulpをグローバルにインストール

npm install --global gulp

そしてローカルにgulpをインストール

npm install --save-dev gulp gulp-util

gulpfile.jsを作成する。これはGulpの操作の基本となる重要なデータ

touch gulpfile.js

試しにgulpでHello Worldを出してみよう

var gulp = require('gulp');

gulp.task('default', function() {
  return gutil.log('Hello World!')
});

するとHello Worldが表示される

gulp

Gulpの操作で基本となるメソッドは主に4つ

  • task
  • src
  • dest
  • watch

taskはファイル操作の一連の流れを定義する基本的なメソッドで、そのなかで、srcを指定することでファイルの変換が始まる。

srcは操作の対象になるファイルを読み出す。そして、deskで指定したディレクトリに、一連の操作を終えたデータを書き出すといった流れになる。

各操作(変換)はpipe()の中で定義され、操作が終わったデータは次のpipe()に引き渡すことができる。

この例ではtaskにdefaultを指定してある。これはgulpコマンドを起動した時に自動的に起動されるタスクのことで、基本的なタスクであるので覚えておこう。

gulp.task('default', function() { 
   gulp.src('source/*.js')
   .pipe(/*hoge*/)
   .pipe(/*hoge*/)
   .pipe(gulp.dest('public')); 
});

watchでは任意のファイルを監視して、そのファイルに変更があった場合に指定したタスクを起動することができる。

SassとGulp

たとえば、source/sassフォルダに配置されたSassファイルを監視して、変更があった時は自動的にpubilc/cssファルダにcssファイルとしてコンパイルするときは以下のようにする。

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

 gulp.task('sass', function() { 
  return gulp.src('source/sass/*.sass')
            .pipe(sass())
            .pipe(gulp.dest('public/css')); 
  });  
 gulp.task('default', function() {
    gulp.watch('source/sass/*.sass', ['sass']); 
});

もしgulp-sassがインストールされていなければインストールしておこう。

sudo npm install gulp-sass --save

ReactとGulp

現時点で、最も需要の高い用途は、ES6形式で記述したReactアプリケーションに変更を加えた時、自動的に再コンパイルされるようにしたいとするときだろう。これは少々厄介で、複数のモジュールをインストールしなければならない。

sudo npm install browserify babelify vinyl-source-stream vinyl-buffer

簡単に説明すると

  • browserifyはES6形式でのimport,export文を利用するためのモジュール
  • babelifyはES6形式のJavaScriptコードをES5形式にコンパイルするためのモジュール
  • vinyl-source-streamはbundleで返されたファイルをgulpで扱えるように変換するモジュール
  • vinyl-bufferはそれらを操作するためのモジュール

わかりにくい・・

var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task('react', function () {
     browserify('react/app.js',{debug: true})
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('app'));
});
 gulp.task('default', function() {
    gulp.watch('react/*.js', ['react']); 
});

ここで、app.jsはReactのメインファイルである。 こうすると、変更があったときに、appディレクトリにReactアプリケーションとして、app.jsが書き出される。