タスクランナーgulp入門

gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。

node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。

Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。

後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。

node.jsのインストール

node.jsが必要ですのでインストールしていない方はインストールしましょう。

公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。

コマンドラインに慣れている方はインストーラーでインストールせずにnodebrewなどのバージョン管理ツールでインストールしたほうが後々バージョンなども簡単に変更できて便利です。

以下のコマンドでインストールできます。

curl -L git.io/nodebrew | perl - setup

インストールが終了したら以下のコマンドで.bash_profile にnodebrewの設定を追加して

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

以下のコマンドでnodebrewの設定を反映させます。

source ~/.bash_profile

gulpのインストール

以下のコマンドをターミナル.appなどで入力することでgulpのインストールができます。

sudo npm install -g gulp

個人的にハマったのですがnpmのバージョンが古いとインストール時にエラーが出てインストールできません。

以下のコマンドでnpmを最新のバージョンに変更しておきましょう。

sudo npm install -g npm

初期設定

まずgulpを利用したいディレクトリに移動します。

Macではターミナルにcd[スペース]と入力してからプロジェクトフォルダをターミナルにドラッグアンドドロップすると次のようなプロジェクトフォルダまでのパスが表示されるのでそのままリターンを押します。

cd /Users/nishihata/Desktop/gulp

今回はデスクトップ上に作成したgulpフォルダをプロジェクトフォルダと見立てて解説を行っていきます。

package.jsonの作成

まず最初にnode.jsのパッケージを管理するpackage.jsonを作成します。ターミナルで以下のコマンドを入力してリターンを押しましょう。

npm init

そうするとターミナルが「name: (gulp) 」といった具合に設定内容の入力を求めてきます。基本的にはリターンで初期値を入れてしまって問題ありません。

最後に以下のようなpackage.jsonの内容が表示されて、「Is this ok? (yes)」と聞かれるのでリターンを押すとプロジェクトフォルダにpackage.jsonが生成されます。

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

次に以下のコマンドでインストールしたgulpのバージョンを確認します。

gulp -v

以下の様な内容が表示されるかと思います。

[gulp] CLI version 3.6.2
[gulp] Local version 0.0.0

CLI version と同じgulpをLocalにインストールする必要があるので以下のコマンドでインストールを行います。

sudo npm install gulp@3.6.2 --save-dev

もう一度「gulp -v」と入力すると、以下のようにCLIとLocalに同じバージョンがインストールされているのがわかります。

[gulp] CLI version 3.6.2
[gulp] Local version 3.6.2


次にpackage.jsonと同階層にgulpfile.jsというファイルを作成します。

Hello World!

まずはコンソールに「Hello World!」と出力するタスクを作成してgulpが動いているか確認しましょう。

gulpfile.jsの内容を以下の様にします。

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

ファイルを作成したら以下のコマンドを入力しましょう。

gulp

そうすると以下のように「Hello World!」が出力されるかと思います。

[gulp] Using gulpfile ~/Desktop/gulp/gulpfile.js
[gulp] Starting 'default'...
Hello World!
[gulp] Finished 'default' after 72 μs

ファイルの監視

gulpでファイルを監視するにはwatchメソッドを利用します。サンプルとしてgulpディレクトリ直下にhtdocsというディレクトリとその内側にsassディレクトリ、その内側にstyle.scssというファイルを作成し以下のようなディレクトリ構成にしましょう。

.
├── gulpfile.js
├── node_modules
│   └──...
├── htdocs
│   └── sass
│       └── style.scss
└── package.json

gulpfile.jsの内容を以下のように変更してからコマンドラインで「gulp watch」と入力してください。

var gulp = require('gulp');
 
gulp.task('watch', function() {
  gulp.watch('htdocs/sass/*', function(event) {
    console.log('File change');
  });
});

style.scssに何か変更を加えるたびにFile changeとconsole上に表示されるかと思います。今回はhtdocs/sass/内のファイルを監視し変更があるたびに「File change」と出力するタスクを作成しました。

監視を終了したい場合はキーボードからCtrl+Cを入力します。

Sassのコンパイル

次はgulpでSassを利用してみましょう。まずは以下のコマンドでローカルにgulp-sassをインストールします。

npm install gulp-sass --savave-dev

gulpfile.jsの内容を以下のように変更してからコマンドラインで「gulp watch」と入力するとscssファイルに変更があるたびにSassが実効されCSSディレクトリにコンパイル後のファイルが出力されます。

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('watch', function() {
  gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass', function () {
    gulp.src('htdocs/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./htdocs/css'));
});

autoprefixerの利用

gulp-autoprefixerを利用してベンダープリフィックスの制御を行います。(autoprefixerについてはCSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」を参照)

まずは以下のコマンドでgulp-autoprefixerをインストールします。

npm install gulp-autoprefixer --save-dev

gulpfile.jsの内容を以下のように変更するとscssファイルをcssファイルに出力する前にベンダープリフィックスの制御を行うことができます。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
  
gulp.task('watch', function() {
  gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass', function () {
    gulp.src('htdocs/sass/*.scss')
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest('./htdocs/css'));
});

CSSスプライトの利用

gulp.spritesmithを利用してCSSスプライトの生成を行います。

以下のコマンドでgulp.pritesmithをインストールします。

npm install gulp.spritesmith --save-dev

今回はhtdocs直下にspriteというディレクトリを作成し作成したスプライト画像をimageディレクトリに出力します。

gulpfile.jsの内容を以下のように変更するとsprite内のファイルの変更時に自動的にCSSスプライトの生成が行われます。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require("gulp.spritesmith");
 
gulp.task('watch', function() {
    gulp.watch('htdocs/sass/*.scss', ['sass']);
    gulp.watch('htdocs/sprite/*', ['sprite']);
});
gulp.task('sass', function () {
    gulp.src('htdocs/sass/*.scss')
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest('htdocs/css'));
});
gulp.task('sprite', function () {
    var spriteData = gulp.src('htdocs/sprite/*')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss'
        }));
    spriteData.img.pipe(gulp.dest('htdocs/image'));
    spriteData.css.pipe(gulp.dest('htdocs/sass'));
});

CSSの圧縮

CSSの圧縮にはgulp-cssminを利用します。

npm install --save-dev gulp-cssmin

gulpfile.jsの内容を以下のように変更すると「gulp deploy」とコマンドを入力するとCSSの圧縮が行われます。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require("gulp.spritesmith");
var cssmin = require('gulp-cssmin');
  
gulp.task('watch', function() {
    gulp.watch('htdocs/sass/*.scss', ['sass']);
    gulp.watch('htdocs/sprite/*', ['sprite']);
});
gulp.task('sass', function () {
    gulp.src('htdocs/sass/*.scss')
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest('htdocs/css'));
});
gulp.task('sprite', function () {
    var spriteData = gulp.src('htdocs/sprite/*')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss'
        }));
    spriteData.img.pipe(gulp.dest('htdocs/image'));
    spriteData.css.pipe(gulp.dest('htdocs/sass'));
});
 
gulp.task('deploy', function () {
    gulp.src('htdocs/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('htdocs/css'));
});

jadeのコンパイル

gulp-jadeを利用するとjadeのコンパイルができます。

npm install gulp-jade --save-dev

htdocsディレクトリの直下にjadeディレクトリを作成し変更をhtdocsに出力します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require("gulp.spritesmith");
var cssmin = require('gulp-cssmin');
var jade = require('gulp-jade');
   
gulp.task('watch', function() {
    gulp.watch('htdocs/sass/*.scss', ['sass']);
    gulp.watch('htdocs/sprite/*', ['sprite']);
    gulp.watch('htdocs/jade/*', ['jade']);
});
gulp.task('sass', function () {
    gulp.src('htdocs/sass/*.scss')
        .pipe(sass())
        .pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
        .pipe(gulp.dest('htdocs/css'));
});
gulp.task('sprite', function () {
    var spriteData = gulp.src('htdocs/sprite/*')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss'
        }));
    spriteData.img.pipe(gulp.dest('htdocs/image'));
    spriteData.css.pipe(gulp.dest('htdocs/sass'));
});
 
gulp.task('deploy', function () {
    gulp.src('htdocs/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('htdocs/css'));
});
 
gulp.task('jade', function () {
    gulp.src('htdocs/jade/*.jade')
        .pipe(jade())
        .pipe(gulp.dest('htdocs/'));
});

Gruntより自由度が高そうなので色々と研究してみたいと思います。

スポンサードリンク

«［書評］Node.jsの教科書 | メイン | gulpとnode.jsの連携»