gulpの導入方法と使い方

gulpの導入方法と使い方

面倒な作業を自動でやってくれるタスクランナー「gulp」の導入方法と使い方についてまとめていきたいと思います。

gulpとは?

gulpとはNode.jsをベースとしたビルドシステムで、CSSファイルの圧縮やSassファイルのコンパイルなど、面倒な作業を自動化してくれる便利なツールです。以前このブログでも書いたGruntなどのタスクランナーと似ているので、よくタスクランナーの1つとして紹介されています。

Gruntとの違いは?

Gruntはプラグインごとに読み込むファイルと出力するファイルを設定する必要があります。そのため、使用するプラグインが多いと設定ファイルである「Gruntfile.js」の中身がちょっと煩雑になり、分かりにくいという点があります。対してgulpは記述の仕方が簡易的で流れが分かりやすくなっています。

2. gulpの導入方法

2-1. Node.jsをインストール

gulpを使用するには、まずNode.jsをインストールする必要があるので、下記URLから公式サイトへ行き、インストールしておきます。

公式サイト

インストールが終わったら、ターミナルで下記コマンドを実行(Returnキーをポチっと)します。バージョン(数字)が表示されればインストールが正常に完了しています。

$ node -v

npmのバージョンを調べるときはnpm -vで確認出来ます。

2-2. glup-clipのインストール

Node.jsとnpm(Node.jsをインストールすると一緒にインストールされます)のインストールが完了したら次はgulp-cliをインストールします。

グローバルインストールをするとどこからでも使えて便利なのですが、プロジェクトごとにgulpのバージョンが異なる場合エラーが出てしまいます。なので、以前グローバルにインストールしたことがある人は前のバージョンを削除するためにnpm uninstall -g gulpを実行後に下記コマンドで再インストールしてください。

※root制限でエラーが出た場合sudo npm〜としてください。パスワードの入力が求められたら、Macのログインパスワードを入力。

 $ npm install -g gulp-cli	

公式サイト

2-3. package.jsonを作成

それでは、さっそくgulpをインストールしていきたいと思います。任意の場所に任意の名前のプロジェクトフォルダーを作成します。ここでは、デスクトップ上に「project」という名前のフォルダーを作成しました。

尚、ディレクトリの移動については以前書いたこちらの記事内で簡単に説明しているので、参考にしてみてください。

$ cd ~/Desktop/project

ディレクトリを「project」へ移動させたら、下記のコマンドを実行します。

$ npm init	

コマンドを実行するとReturnキーを押すたびに下記の項目に関して質問されます。Returnキーを連打していき最後に「Is this ok?」と表示された後にもう一度Returnキーを押します。すると、プロジェクトのフォルダー内に「package.json」というファイルが作成されます。

  • package name: (project-name)
  • version: (1.0.0)
  • description:
  • entry point: (index.js)
  • test command:
  • git repository:
  • keywords:
  • author:
  • license: (ISC)

作成されたpackage.jsonの中身は下記のようになっていると思います。

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}	

2-4. gulpをインストールする

下記、コマンドを実行しgulpをインストールします。

npm install gulp --save-dev

gulp -vとコマンドを実行し、下記の様に表示されればインストールの完了です。xには数字が入ります。

[00:00:00] CLI version x.x.x
[00:00:00] Local version x.x.x

バージョンの管理

npm installはバージョンを指定せずに行うと、最新のバージョンがインストールされます。これにより、ローカルとグローバルのgulpのバージョンが異なってしまうケースもあります。なので、グローバルにインストールしたパッケージは適宜アップデートしましょう。

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1" //gulpが追加
  }
}

3. gulpの設定

3-1. プラグインをインストールする

公式サイトにいくと様々なプラグインがあるので、用途に合わせてインストールします。ここではgulp-sassというSassファイルをコンパイルするためのプラグインをインストールしました。

npm install gulp-sass --save-dev

公式サイト

3-2. gulpfile.jsを作成

次に、gulpを実際に動かすために必要となる「gulpfile.js」ファイルをprojectフォルダ内に作成し、下記を記述します。

Sassファイルをコンパイルしてみる

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

gulp.task('sass', function () {
  return gulp.src('sass/**/*.scss') //sassディレクトリ直下にあるscssファイル
    .pipe(sass({outputStyle: 'compressed'})) //圧縮して一行にする
    .pipe(gulp.dest('./css')); //CSSファイルの出力先のディレクトリ
});

//Sassファイルが更新されたら自動的にコンパイル
gulp.task('watch', function() { 
  gulp.watch('sass/style.scss', ['sass'])
})

gulp.task('default',['sass','watch']);

下記、コマンドを実行すると指定した場所にコンパイルされたCSSファイルが出力されていると思います。

$ gulp	

これで、Sassファイルをコンパイルすることができました。Sassについては以前書いた、「Sass(SCSS)の基本的な使い方」で書いているので良ければ見てみてください。


以上、gulpの導入方法と使い方のまとめでした。他のプラグインについてはまた別の機械にまとめていきたいと思います。

Leave a Comment