Gulpタスクランナーを使って作業効率化

gulp

ここ一年で「Gulp」というタスクランナーの聞く機会が増えました。

爆速!作業効率10倍!!というコピーがあったり、今時のフロントエンドなら当たり前!という記事を見て

何度かチャレンジしましたが馴染めず、今まで使う機会がなかったです。

最近のお仕事で速度を重視する案件が多く、静的で圧縮コンパイルが必須になりツールでは限界を感じましたのでやろうやろうと思っていたGulpを勉強しました。

学習コストが低いと言われていますが結構難しかった。

Gulpとは?

gulp.jsはNode.jsを使用し作業を毎回行う作業を自動化してくるビルドシステムです。

Koalaなどアプリケーションを使用してSassのコンパイルや圧縮することができますが、Gulpを使用すれば多くのアプリーケーションを使用せず、自分好みまたは案件ごとに作業の自動化をすることができます。

Node.jsインストール

Node.js

Node.js

Gulpを使用するにはNode.jsのインストールが必要になります。

まだインストールしていない方は公式サイトよりインストールしてください。

ターミナルでバージョンが表示されたら無事インストールが出来ています。

node -v

npm

Node.jsではnpmというコマンドを使用してインストールを行います。

私が紹介するのはMacの「ターミナル」を使用してのインストール方法です。

gulpインストール

npmではローカルとグローバルどちらにインストールするかを選択することができます。

今回gulpはグローバルでインストールしますので-gを追加しています。

先頭にsudoを付けないとインストールできないかもしれません。

npm install -g gulp-cli
sudo npm install -g gulp-cli

Gulpバージョンの確認

gulp -v

ディレクトリの作成とcd(チェンジディレクトリ)

Gulpを使用したいフォルダーを作成し、ターミナルでフォルダーに移動します。

cd /Users/◯◯◯/myproject
package.jsonの作成

パッケージを作成しておくことで
Gulpバージョンやインストールしたパッケージのバージョンを確認することができます。

npm init

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

Gulp本体にはSassのコンパイルや画像の圧縮機能はありません。

必要なプラグインをインストールし設定する必要があります。

Sassコンパイル

//Sassインストール
npm install gulp-sass --save-dev

–save-dev と後ろに追加することによってインストールしたプラグインのバージョンがjsonに記入されます。

gulpfile.jsの作成

準備ができたらタスクを記述するgulpfile.jsを作成します。

下記のように宣言と処理したいコードを記述していきます。

私の場合はgulpfile.js1つで複数案件を処理するようにしています。まだまだ微調整が必要。
(自分のみで制作する場合の使用)

他社からの案件の場合は案件ごとに設定しています。

var gulp = require("gulp");//gulp宣言
var sass = require("gulp-sass");
var path = require("path"); 
var autoprefixer = require("gulp-autoprefixer");
var frontnote = require("gulp-frontnote");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var cssmin = require("gulp-cssmin");
var rename = require('gulp-rename');
var svgmin = require('gulp-svgmin');
var imagemin = require("gulp-imagemin");
var minifyHTML = require('gulp-minify-html');
var csso = require('gulp-csso');//css軽量化/最適化
var postcss = require('gulp-postcss');
var fs = require('fs');
var ejs = require("gulp-ejs");//テンプレート

//jsonファイル読み込み
var jsonData = require('./〇〇/pages.json');

//Sassコンパイル
gulp.task("sass",function(){
 gulp.src("./**/common/css/*.scss", {base: './src/'})
 .pipe(plumber())
 .pipe(sass())
 .pipe(postcss([
 require('autoprefixer')({browsers: ['last 2 versions', 'ie >= 11', 'iOS >= 7', 'Android >= 4.2']}),
 require("css-mqpacker")()
 ]))
 .pipe(csso())
 //.pipe(cssmin())
 .pipe(rename({suffix: '.min'}))
 .pipe(gulp.dest('dist'));
});


//js圧縮
gulp.task("js", function() {
 
 gulp.src(
 ["./**/common/js/*.js",'!' + "./**/common/js/*.min.js"], {base: './src/'}
 )
 
// gulp.src(["./**/common/js/*.js",'!' + "*.min.js"], {base: './src/'})
 .pipe(plumber())
 .pipe(uglify())
 .pipe(rename({suffix: '.min'}))
 .pipe(gulp.dest('dist'));
});

//SVG圧縮
gulp.task("svgmin", function() {
 gulp.src("./**/*.svg")
 .pipe(plumber())
 .pipe(svgmin())
 .pipe(rename({suffix: '.min'}))
 .pipe(gulp.dest('dist'));
});

//画像圧縮
gulp.task('imagemin', function(){
 gulp.src("./**/images/*.jpg")
 .pipe(imagemin())
 .pipe(gulp.dest("jpegtran_images"));
 gulp.src("./**/images/*.png")
 .pipe(imagemin())
 .pipe(gulp.dest("optipng_images"));
});

//ejs
gulp.task("ejs", function() {
 gulp.src(
 ["./◯◯/**/*.ejs",'!' + "./◯◯/**/_*.ejs"], {base: './src/'}
 )
 .pipe(plumber())
 .pipe(ejs({
 jsonData: jsonData //jsonData に pages.json を取り込む
 }))
 .pipe(minifyHTML({ empty: true }))
 .pipe(rename({extname: '.html'}))
 .pipe(gulp.dest('dist'));
});


/**
 * watch
 * watchでsassを自動で書きだす
 */
gulp.task("default",function(){
 gulp.watch(["./◯◯/common/js/*.js",'!' + "./◯◯/common/js/*.min.js"],["js"]); 
 gulp.watch("./◯◯/common/css/*.scss",["sass"]); 
 gulp.watch("./◯◯/common/svg/*.svg",["svgmin"]); 
 gulp.watch(["./◯◯/*.ejs","./◯◯/**/*.ejs"],["ejs"]);
});

autoprefixerインストール

ベンダープレフィックを自動的に追加してくれるプラグインです。

最新から2つ前まで、IEverも細かく設定することができます。

npm install gulp-autoprefixer --save-dev

ファイル名変更

圧縮したファイル名に.minの追加や拡張子の変更をすることができます。

npm install gulp-cssmin gulp-rename –save-dev

.pipe(rename({extname: ‘.html’}))

エラーでWatchが停止するのを防ぐプラグイン

Gulpではエラーが発生した場合に自動タスクが停止するのでplumberを設定しておくことでWatchを停止しないようにできます。

npm install gulp-plumber --save-dev

javascript圧縮

javascriptを1行に圧縮してくれるプラグインです。

npm install gulp-uglify --save-dev

SVG&画像の圧縮

SVGやjpeg,pngデータを圧縮してくれるプラグインです。jpegminiやtinypngを使用しなくても自動で圧縮できます。

//SVGコンパクト
npm install gulp-svgmin

//イメージmin
npm install --save-dev gulp-imagemin

メディアクエリーをまとめて整理するプラグイン

以前までメディアクエリーを複数箇所に記述しており、無駄なコードが多かったのですがこのプラグインを使用するとメディアクエリーをひとまとめにして整頓してくれます。

var postcss = require(‘gulp-postcss’);

※postcssのインストールも必要になります。

npm i css-mqpacker --save-dev

htmlファイルの圧縮

.htmlファイルを1行に圧縮してくれます。htmlの圧縮も大切ですよ。

npm install --save-dev gulp gulp-minify-html

htmlテンプレート化

共通部分のインクルード化や変数を使うことができます。

Ejsを使用することによって開発環境に依存しない開発ができます。

npm install --save-dev gulp-ejs

ヘッダーの共通化の場合

<% include ../common/include/_head %>

メタタグ、タイトル、階層はjsonで管理することができるのでphpを使用しなくてもプログラムのような事ができます。

Ejsで参考にさせていただいたサイト↓↓

EJSを使ったコーディング実践 ― ②.ejsから.htmlをフォルダ分けしてコンパイル
前回から引き続きテンプレートエンジン「EJS」を使ってコーディングー。gulpとejsを使ってJSONデータからHTMLを一括生成してフォルダ分けしまっす。簡単だよ。
テンプレートエンジンEJSで使える便利な構文まとめ – Qiita
※gulp-ejsでのビルドを想定しています。

# EJSでできること

* 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ)
* HTMLへの値の展開
* ループと条件分岐
* 外部ファイルの読み込みとパラ…

npmアンインストール方法

//アンインストール
npm uninstall gulp-ejs --save-dev

mpmバージョンを選択してインストール

//バージョンを選択してインストール
npm install --save-dev gulp-ejs@2.3.0

Gulpインストールについて参考にさせていただいたサイト

5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
近年、Webサイト制作の手間を自動化する「タスクランナー」というツールが注目されてます。本記事はGulp(ガルプ)の入門記事として、導入手順を詳しく解説します。ビデオでも手順を解説しているので、コマンドラインが苦手な方でも安心して取り組めます。
Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
(編集部注*2014年9月18日に公開された記事を再編集したものです。) 先日ランサーズさん主催の「週末ランサーズ」に登壇させていただきました、フロントエンジニアのハカセです。 偶然にもTV取材が入っているという状態でハンズオンな勉強会をすることになり超緊張しました。以下がそのときのスライドです。 Gulp入

まとめ

今までアプリケーションで圧縮をしていたのですが、Gulpを使用することにより1つのツールですべての事をできるようになったので満足しています。

テンプレートファイルの存在も知ることが出来たので今後は積極的にGulpを使用して制作していきたいと思います。

gulp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です