Gulpの使い方

Tag:

「Gulpを利用する手順」「基本的な使い方」「便利なプラグイン」についてまとめてます。

Gulpを利用する手順

node.jsをインストール

https://nodejs.org/en/」からファイルをダウンロードして実行すればインストールできます。

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

npm install -g gulp

プロジェクトディレクトリ内にpackage.jsonを作成

npm init

package.jsonファイルが生成されます。

ローカルにgulpをインストール

npm install gulp --save-dev

node_modulesというフォルダが生成され、その中にgulpのパッケージが格納されます。

また、「package.json」にgulpの記述が追記されます。

"devDependencies": {
  "gulp": "^3.9.1"
}

gulpfile.jsファイルを作成

touch gulpfile.js

gulpfile.js内にGulpの設定を記述していきます。

作業フォルダ

ここでは、下記フォルダで作業を進めます。

node_modules
└─ gulp            gulpモジュール

public
├─ css             cssファイル生成先
├─ img             imgファイル生成先
└─ js              jsファイル生成先

src
├─ images
|  └─ img.JPG      JPGファイル
├─ js
|  ├─ app.js       jsファイル
|  └─ jquery.js    jsファイル
└─ sass
   └─ app.scss     sassファイル

gulpfile.js        ★このファイルにGulpの処理を記述します
package.json       npmのライブラリ管理ファイル

Gulpの基本的な使い方

Gulpを利用するうえで、まず理解が必要なのが下記メソッドの使い方です。

task:タスクを作成
src:コピー元指定
dest:コピー先指定
pipe:処理をつなげる
watch:ファイル監視

以下、基本的な使い方の中で各メソッドの動きを確認してみてください。

1つのtaskを実行

ソース

var gulp = require('gulp');

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

実行

helloタスクを指定して実行します。
gulp_basic_1

複数のtaskを実行

ソース

var gulp = require('gulp');

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

gulp.task('goodbye', function () {
    console.log('Goodbye');
});

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

実行

タスクを指定しなければ、defaultタスクが実行されます。
gulp_basic_2

今回、「defaultタスク」に「helloタスク」と「goodbyeタスク」を指定しています。この場合、「goodbyeタスク」が先に実行されてしまう可能性もあります。
複数のtaskを実行順序を指定して実行
「helloタスク」を確実に先に実行させて、その後「goodbyeタスク」を実行させるには下記のようにします。

ソース

var gulp = require('gulp');

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

gulp.task('goodbye', ['hello'], function () {
    console.log('Goodbye');
});

gulp.task('default', ['goodbye']);
基本メソッド(src、pipe、dist)でファイルコピー

ソース

var gulp = require('gulp');

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

gulp.task('default', ['js']);

実行

実行前のフォルダです。
gulp_basic_4

gulpを実行します。
gulp_basic_6

実行後のフォルダです。
gulp_basic_5

ファイル監視

ソース

var gulp = require('gulp');

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

gulp.task('watch', function () {
    gulp.watch('src/js/*.js', ['js']);
});

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

watchメソッドでは、「src/js/*.js」が変更されたら「jsタスク」を実行するように指定しています。

実行

gulp_basic_7
「src/js/app.js」を修正して保存すると「js」タスクが実行されます。
gulp_basic_8
「Ctrl + c」で止まります。

便利なプラグイン

Sassのコンパイルなどは別途プラグインが必要です。

画像圧縮gulp-imagemin

プラグインインストール

npm install gulp-imagemin --save-dev

ソース

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

gulp.task('img', function () {
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('public/img'));
});

gulp.task('default', ['img']);

実行

「303664byte」のJPGファイルが「267907byte」になりました。
gulp_basic_image

参考サイト

https://www.npmjs.com/package/gulp-imagemin

Sassコンパイルgulp-sass

プラグインインストール

npm install gulp-sass --save-dev

ソース

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

gulp.task('sass', function () {
    gulp.src('src/sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css'));
});

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

実行

「src/sass/app.scss」をsassコンパイルして、「public/css/app.css」が生成されました。
gulp_basic_sass

参考サイト

https://www.npmjs.com/package/gulp-sass

ファイル結合gulp-concat

プラグインインストール

npm install gulp-concat --save-dev

ソース

var gulp = require('gulp');
var concat = require('gulp-concat');
 
gulp.task('js', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('public/js'));
});
 
gulp.task('default', ['js']);

実行

「src/js/app.js」と「src/js/jquery.js」が結合され「public/js/all.js」が生成されました。
gulp_basic_concat

参考サイト

https://www.npmjs.com/package/gulp-concat

ファイル圧縮gulp-uglify

プラグインインストール

npm install gulp-uglify --save-dev

ソース

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
 
gulp.task('js', function () {
    gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('public/js'));
});
 
gulp.task('default', ['js']);

実行

「src/js/app.js」と「src/js/jquery.js」のコメントや改行などが削除された後、ファイル結合され「public/js/all.min.js」が生成されました。
gulp_basic_uglify

参考サイト

https://www.npmjs.com/package/gulp-uglify

ブラウザ反映自動化gulp-webserver

プラグインインストール

npm install gulp-webserver --save-dev

ソース

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

gulp.task('sass', function () {
    gulp.src('src/sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css'));
});

gulp.task('webserver', function () {    
    gulp.src('public')
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true
        }));
});

gulp.task('watch', function () {
    gulp.watch(['src/sass/**/*.scss'], ['sass']);
});

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

実行

gulpを実行後、「http://localhost:8000/」にアクセスします。
gulp_basic_webserver

「src/sass/app.scss」を修正して保存すると、自動でブラウザも更新されます。
gulp_basic_webserver2

参考サイト

https://www.npmjs.com/package/gulp-webserver

エラー時のwatch継続gulp-plumber

プラグインインストール

npm install gulp-plumber --save-dev

ソース

var gulp = require('gulp');
var sass = require('gulp-sass');
var webserver = require('gulp-webserver');
var plumber = require('gulp-plumber');  // 追加

gulp.task('sass', function () {
    gulp.src('src/sass/**/*.scss')
        .pipe(plumber())                // 追加
        .pipe(sass())
        .pipe(gulp.dest('public/css'));
});

gulp.task('webserver', function () {    
    gulp.src('public')
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true
        }));
});

gulp.task('watch', function () {
    gulp.watch(['src/sass/**/*.scss'], ['sass']);
});

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

上記のようにすると、Sassのコンパイルでエラーが発生してもwatchが継続されます。

参考サイト

https://www.npmjs.com/package/gulp-plumber

スポンサーリンク