Gulpセットアップの流れと例【超便利・効率化】

Web

Gulpを使うと、ファイルのコンパイル・圧縮・リネーム・整頓などなど色んなことが簡単にできます。

今回はGulpとは何かは知っていることを前提に、Gulpのセットアップの流れと使用例を紹介していきます。

Gulp初心者でもわかりやすいように1つ1つのタスクの説明も書いています。

使いこなすとコーディングや開発作業が効率的に行えるかと思うので是非使ってみてください

スポンサードリンク

Gulpのセットアップの流れ

まずは流れを書いていきます。
コマンドラインでの作業ばかりです。
*Macを使用

この記事ではnpmでインストールしています
yarnが良い場合はこちらをどうぞww
yarnチートシート

環境の準備

node.jsをインストール

公式ページからまずnode.jsをお使いのPCにインストールしてください。
Node.js

ターミナルにてバージョンの確認

npm -v

*最新バージョンにするには
sudo npm install -g npm

(mkdirで)プロジェクトのフォルダを作り以下のコマンド

cd 作ったファイル名
npm init

cd ファイル名でファイル名の場所に移動
npm initでpackage.jsonファイルが作成されます

Gulpの準備

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

sudo npm install -g gulp

ローカルにインストール(作ったフォルダ内)

sudo npm install gulp —save-dev

*—save-devでpackage.jsonのdevDependenciesにgulpが追加される

これでGulp準備完了

gulpfile.jsを作成

gulpfile.jsを作成

コードを書いていく

基本的には以下のような形

var gulp = require('gulp');

gulp.task('default', function() {
    // タスクを書いていく
});

プラグインをインストール

以下のコマンドでプラグインをインストールしていきます

npm install 入れたいプラグイン —save-dev

インストールするとpackage.jsonファイルのdevDependenciesにインストールしたプラグインが追加されています。

gulpfile.jsでインポート

var 名前 = require(‘プラグイン名’);

これでインポートできます

こんな感じで使いたいプラグインをnpmでインストールしてgulpfilp.jsファイルでインポートしてタスクを書いていきます。

以下で実際の例をみながらどんな風に書いていくのか見てみましょう〜
プラグインの説明も紹介しています。

Gulpセットアップしてみた

今回使うプラグイン達

  • gulp-sass:CSSコンパイル
  • gulp-rename:ファイル名の変更
  • gulp-plumber:エラーが起きてもwatchなどのタスクを継続。エラーのたびにいちいちgulp タスク名をrunしなおさなくでよくなる。
  • gulp-merge-media-queries:メディアクエリの順番を整頓
  • gulp-autoprefixer:ベンダープレフィックス
  • gulp-image-resize:画像のリサイズ
  • gulp-imageoptim:画像の圧縮
  • gulp-changed:変更があったファイルを監視する
  • gulp-notify:通知機能
  • gulp-uglify:JavaScriptの圧縮
  • gulp-minify-html:HTMLの圧縮
  • gulp-minify-css:CSSの圧縮
  • browser-sync:ファイル等の保存時にブラウザをリロード

コマンド

npm install gulp-sass gulp-autoprefixer gulp-plumber gulp-notify gulp-merge-media-queries gulp-image-resize gulp-imageoptim gulp-uglify pump gulp-htmlmin gulp-clean-css gulp-rename browser-sync --save-dev

ファイルの構造


*今回は圧縮後のファイルがpublicフォルダに入っていく感じにしています

gulpfile.js内

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var mmq = require('gulp-merge-media-queries');

var imageResize = require('gulp-image-resize');
var imageOptim = require('gulp-imageoptim');
var uglify = require('gulp-uglify');
var pump = require('pump');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();


// コンパイル
gulp.task('sass', function () {
  return gulp.src('./scss/**/*.scss')
      .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 version'],
        cascade: false
    }))
    .pipe(mmq({ log: true }))
    .pipe(notify('SCSSをコンパイルしたよ〜'))
    .pipe(gulp.dest('./css'));
});

// browserSync
gulp.task('browser-sync', function(){
    browserSync.init({
        server: {
            baseDir: "./",
            index: "index.html"
        },
        notify: false
    });
});

gulp.task('bs-reload', function(){
    browserSync.reload();
});

// 変更をwatchする
gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('./scss/**/*.scss', ['sass', 'bs-reload']);
  gulp.watch('*.html', ['bs-reload']);
});


// 画像圧縮
gulp.task('minifyIMG', function() {
    return gulp.src('./img/**/*')
        .pipe(imageResize({
            width: 1500,
            imageMagick: true
        }))
        .pipe(imageOptim.optimize({
            jpegmini: true
        }))
        .pipe(gulp.dest('public/img'));
});

// js圧縮
gulp.task('minifyJS', function(cb){
    pump([
        gulp.src('./js/*.js'),
        uglify(),
        rename({ extname: ".min.js" }),
        gulp.dest('./public/js')
        ],
    cb
    );
});

// html圧縮
gulp.task('minifyHTML', function() {
    return gulp.src('*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./public'))
});

// css圧縮
gulp.task('minifyCSS', function(){
    return gulp.src('./css/*.css')
        .pipe(cleanCSS())
        .pipe(rename({ extname: ".min.css" }))
        .pipe(gulp.dest('./public/css'))
});


// 圧縮タスク実行
gulp.task('minifyAll', ['minifyIMG', 'minifyJS', 'minifyHTML', 'minifyCSS']);

参考document達

セットアップの内容

sassタスク

「sassタスクでscssフォルダ内の.scssファイルを.cssにコンパイルしてcssフォルダ内にポイ」

詳細:
1:gulp.srcでファイルを指定
2:plumberのおかげでエラーが出た際もタスクを実行してくれる(watchしなおす手間が省ける)
3:autoprefixerの’last 2 version’で最新の2バージョンのベンダープレフィックス。
*cascadeはfalseでオッケー(デフォルトではtrue:CSSがcompressされなかった時にVisual Cascadeを使用される)
4:mmq(gulp-merge-media-queries)でcssのメディアクエリを整頓
5:notifyでPC上にタスク完了時にメッセージを表示
こんな感じ

6:gulp.destで吐き出し場所を指定

browserSync

「browserSyncでブラウザをいちいちリロードしなくてオッケー(localhost:3000が開かれてタスク完了後にリロードされる)」
こんな感じ

詳細:
baseDirでディレクトリを指定、indexでどのファイルか指定
あとはドキュメントの通り記述してwatchのところにtask名を追加
notify: falseにしておくとブラウザ上に通知が出ない

minifyIMGタスク

「画像を圧縮・リサイズする」
gulp-image-resizeのドキュメントに記載の通りimageResizeを使う時はimageMagickをインストールしておく。

brew install imagemagick

*上はMac OS Xの場合

documentにいろんなオプションが載っているので自分の好きなようにカスタムしましょう(例:width:1500 height:600など)
imageOptimはあらかじめアプリをダウンロードしておく(無料です)
imageOptim(mac)
もしjpegminiを使いたい場合(jpegmini: trueにする場合)はjpegminiもダウンロード(有料です)
jpegmini
*jpegminiを使う際はpreferenceから設定をOptimize Originalsに設定

*Export to 〇〇(場所)に設定しているとその場所にエクスポートされてgulp.destで設定している場所に圧縮された画像が吐き出されないです。

minifyJSタスク

「jsファイルを圧縮・リネームする」
uglifyを使う際にpumpを使うとエラーの表示が見やすいのでpumpを入れて使うのをおすすめされていました。
わかりやすいようrenameで.min.jsにする

minifyHTMLタスク

「htmlを圧縮する」
gulp-minify-htmlが非推奨になっており、gulp-htmlminがより正確で速いとのことでhtmlminを入れました。
collapseWhitespace: trueでいらない改行などを削除

minifyCSSタスク

「cssを圧縮・リネームする」
またまたgulp-minify-cssが非推奨になっており、gulp-clean-cssを使ってくださいとのことなのでcleanCssを入れました。
renameで.min.cssに変更

基本的にgulp.srcでタスクを走らせたいフォルダ・ファイルを指定してgulp.destで吐き出す場所を指定する感じです。

まとめて圧縮系タスクを実行

gulp.task('タスク名', []);[]の中に実行したいタスクを入れて一気に実行できます。
後々必要なタスクが出てきたらgulp.taskでタスクを作ってここに追加すればオッケーです。

作業の流れ

  • HTMLコーディング
  • scssコーディング(watchでファイル保存時にcssにコンパイル)
  • jsで動きつけたり色々する
  • jsやcssの読み込みリンクを.min.css / .min.jsに変更
  • 圧縮
  • 完成

jsファイルもbrowserSyncした方が良いのかな・・・?

まぁフォルダの構造や流れはあくまでも一例なので自分の分かりやすいようにカスタマイズしてくださいませ
*その際にgulp.srcやgulp.destを変更・確認するのも忘れないように。

jsをES6で書いてるなら追加でbabelを、bundleする必要があるならwebpackを追加・設定すればオッケーかと思います

「grunt / gulp / webpack」などいろいろありますが、使えるようになるとコーディングや開発が速くなるかと思うので自分なりの開発環境の雛形を作っておくと良いですね

「Webpackでいいやん、gulp / gruntいらんやん」という声もあるみたいですが、個人的にgulp結構使いやすいしwebpackは本当に必要な時に導入すればいいかなぁ〜って感じですかね

まだまだ勉強しながらなので、「これはこうした方が良いよ」などおすすめがありましたら是非ツイッター等でメッセージいただけると幸いですm(_ _)m
Twitter:kentaro_koga

では〜〜(^^)/

スポンサードリンク