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

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

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

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

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

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を作成

コードを書いていく

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

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達

gulp-sass
gulp-rename
gulp-plumber
gulp-merge-media-queries
gulp-autoprefixer
gulp-image-resize
gulp-imageoptim
gulp-uglify
pump
gulp-htmlmin
gulp-clean-css
gulp-rename
browser-sync＊公式ページが見れなくなっています。。。(2020年1月18日現在)

セットアップの内容

sassタスク

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

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

６：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

では〜〜(^^)/

Posted

2018年3月27日

Web

Tags:

プログラミング, 備忘録