gulpを使ったフロントエンド開発 導入編

/

gulp

gulpはタスクランナーと呼ばれるフロントエンド開発のために必要な処理を自動化してくれるツールです。gulpを使うとSassのコンパイルやコードのチェックなどのスクリプトの実行を一度に出来るようになります。
他に有名なタスクランナーとしてはGruntなどがあります。

名前のgulpというのはあまり聞き慣れない言葉ですが、ごくごく飲むとかガツガツ食べるという意味があるようでロゴもファーストフード風のドリンクがモデルになっています。

インストール

gulpをインストールするにはNode.jsとnpmが必要になります。
Node.jsの導入とnを使っての最新版へのアップデート – Koltatt

#npmからgulpをグローバルにインストール
$ npm install --global gulp-cli

#package.jsonの初期化
$ npm init

#gulpをプロジェクトのローカルにインストール
$ npm install --save-dev gulp

ローカルにもgulpをインストールする事によって処理を実行する際に、グローバルにインストールされたgulpがローカルのgulpを読み込んでくれるのでプロジェクト単位でgulpのバージョンを統一する事が出来ます。

#gulpがローカルに保存されたたディレクトリでバージョンの確認
$ gulp -v

CLI version 3.8.10
Local version 3.9.1

参照
what does gulp-“cli” stands for? – stack overflow

gulpfile.jsの作成

gulpの処理の記入にはgulpfile.jsが必要なためプロジェクトのルートディレクトリに作成します。

#gulpファイルの作成
$ touch gulpfile.js

gulpfile.jsでは実行したい処理をタスク単位で登録していきます。

gulpのタスクはの基本的な流れは以下のようになります。

  1. requireでライブラリを読み込む
  2. srcによって処理を実行する対象(ファイル)を指定
  3. 読み込んだパッケージによる処理を対象に実行
  4. destによって指定された形式で処理が返される
//プロジェクトへのライブラリのインストール
$ npm install sass-gulp --save-dev
//ライブラリの読み込み
var gulp = require('gulp')
var sass = require('gulp-sass')


//taskの基本的な書き方
gulp.task([task-name], function() {
	//ここに処理を記入する
});


//taskの登録
gulp.task('sass', function(){
  //処理を実行するファイルを指定
  return gulp.src('./sass/**/*.scss')
  //読み込んだパッケージによる処理の実行
  .pipe(sass()
  //エラーの登録
  .on('error',sass.logError))
  //実行後に出力されるファイルの出力先の指定
  .pipe(gulp.dest('./css'));
});
//ソースファイルの作成
$ mkdir sass
$ touch sass/style.scss
body {
  h1 {
    font-size: 20px;
  }
}

実行するための準備が整ったらコマンドラインからgulp [task]を実行します。

#taskの実行
$ gulp sass

[15:39:37] Starting 'sass'...
[15:39:37] Finished 'sass' after 228 ms

vi ./css/style.css
body h1 {
  font-size: 20px; }

無事にタスクが実行されました。

またgulp –tasks-simple オプションを使うと登録したタスクの一覧が確認できます。

$ gulp --task-simple

sass
...

その他のgulpのコマンドラインのオプションなどの詳しい説明はgulpのGithubのページで確認する事が出来ます。

gulpを使ったフロントエンド開発 gulpfile.jsの書き方編 – Koltatt