ここ一年で「Gulp」というタスクランナーの聞く機会が増えました。
爆速！作業効率10倍！！というコピーがあったり、今時のフロントエンドなら当たり前！という記事を見て
何度かチャレンジしましたが馴染めず、今まで使う機会がなかったです。
最近のお仕事で速度を重視する案件が多く、静的で圧縮コンパイルが必須になりツールでは限界を感じましたのでやろうやろうと思っていたGulpを勉強しました。
学習コストが低いと言われていますが結構難しかった。
Gulpとは？
gulp.jsはNode.jsを使用し作業を毎回行う作業を自動化してくるビルドシステムです。
Koalaなどアプリケーションを使用してSassのコンパイルや圧縮することができますが、Gulpを使用すれば多くのアプリーケーションを使用せず、自分好みまたは案件ごとに作業の自動化をすることができます。
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で使える便利な構文まとめ – Qiita
# EJSでできること
* 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ)
* HTMLへの値の展開
* ループと条件分岐
* 外部ファイルの読み込みとパラ…
Qiitanpmアンインストール方法
//アンインストール npm uninstall gulp-ejs --save-dev
mpmバージョンを選択してインストール
//バージョンを選択してインストール npm install --save-dev gulp-ejs@2.3.0
Gulpインストールについて参考にさせていただいたサイト
5分で導入！ タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
ICS MEDIAGulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
株式会社LIGまとめ
今までアプリケーションで圧縮をしていたのですが、Gulpを使用することにより1つのツールですべての事をできるようになったので満足しています。
テンプレートファイルの存在も知ることが出来たので今後は積極的にGulpを使用して制作していきたいと思います。
