【gulp】サクっと3stepで覚えるgulpとは〜簡単な使い方

はじめに

gulpは長い事つかってますが、
フロントの方が入れてくれた環境を基に使っているのでゼロから学んだ経験は乏しいです。
（自分はサーバサイド）

そこでgulpの基礎をゼロからなるはやで覚えるための自分用メモです

アジェンダ

1. gulpとは
2. gulp環境つくる
3. gulp使ってみる

1. gulpとは

公式リポジトリは以下です。
https://github.com/gulpjs/gulp

参考サイトからの抜粋です。

gulpはNode.jsをベースとしたビルドシステムヘルパーです。
gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、
ファイルの処理をストリームで行うというところです。
この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。
　 現場で使えるgulp入門 第1回 gulpとは何か

2. gulp環境つくる

gulp環境を作るにはシンプルに以下の3つが必要です

• Node.jsのインストールする
  • nodeコマンドとnpmコマンドを使えるようにする
• npmでgulpをインストールする
  • gulpコマンド使えるようにする
  • package.json作る
• タスクを書く
  • gulpfile.js作る

Node.jsのインストールする

公式サイトからダウンロードしてinstallします。
https://nodejs.org/

とりあえず動かしてみるにしてもLTSの方を落としてみると良いでしょう。

• 【Node.js】Node.jsのLTSやCURRENTってなんだ？

npmでgulpをインストールする

gulpはglobalとlocalとにインストールします。
また、パッケージ管理のためにpackage.jsonを作成します。

# パッケージディレクトリに移動
$ pwd
/path/to/package dir

# package.jsonを作成
# {} だけ記載
$ vim package.json
---- vi ----
{}
------------

# gulpをグローバルにインストール
$ npm install -g gulp

# gulpをパッケージローカルにインストール
#   このタイミングでpackage.jsonに
#   インストールしたものとversionが書かれる
$ npm install --save-dev gulp

# versionが出れば成功
$ gulp -v
[19:53:54] CLI version 3.9.1
[19:53:54] Local version 3.9.1

$ cat package.json
{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

3. gulp使ってみる

gulpタスクの作成

使ってみるといってもまずはgulpタスクを作成する必要があります。
タスクはgulpfile.jsに記載します。

• gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('say Hello!');
});

gulp.task('world', function() {
  console.log('say World!');
});

gulp.task('default', ['hello', 'world']);    

gulpタスクの実行

あとは実行するだけです

# helloタスクを実行してみる
$ gulp hello
[19:58:33] Using gulpfile ~/github/my/for_hatena/gulp-basic-sample/gulpfile.js
[19:58:33] Starting 'hello'...
say Hello!
[19:58:33] Finished 'hello' after 144 μs


# gulpとだけうってdefaultタスクを実行
# default task = hello + worldが呼ばれる
$ gulp
[19:58:48] Using gulpfile ~/github/my/for_hatena/gulp-basic-sample/gulpfile.js
[19:58:48] Starting 'hello'...
say Hello!
[19:58:48] Finished 'hello' after 145 μs
[19:58:48] Starting 'world'...
say World!
[19:58:48] Finished 'world' after 54 μs
[19:58:48] Starting 'default'...
[19:58:48] Finished 'default' after 9.73 μs

いちおうサンプル

作ったサンプルをそのままpushしたので貼っておきます。

• https://github.com/tweeeety/gulp-basic-sample

おわり

これだけだとまだ何もできないですが、
導入して動かしてみるだけで雰囲気はわかるかと思います＼(＾o＾)／