フロントエンドエンジニアのマストツールGulp(ガルプ)。前記事ではGulpで使うべきミニマムに抑えたプラグインを紹介しました。
当然仕事をする上では複数の案件のファイルを触ると思います。ですがその度にGulpファイルとプラグインをインストールしていてはどんどん肥大化してしまい、PCのストレージを食ってしまいますよね。
Gulpファイルとプラグインを1度インストールし、それを案件毎に使いまわせるような配置と設定をし、Gulpをもっと効率的に使いこなすテクニックをご紹介します。
[2018/1/16 →gulpfile.jsの中身を更新しました]
まずはGulpのキモ、gulpfile.jsを作成する
gulpfile.jsをいかに上手に作るかがGulpのチカラを発揮させるキモになります。ここは個人のオリジナリティも出るところなので、コレが正解！というのもありませんので、皆さんの使いやすいように作り上げてください。
りょうまが使っているgulpfile.jsを公開
前回記事で紹介したプラグインを使い、私が普段使っているgulpfile.jsはこんな感じです。
var gulp = require("gulp");
var cache = require('gulp-cached'); //変更のあったもの(scss)
var plumber = require('gulp-plumber'); //watch中にエラー防止
var csscomb = require('gulp-csscomb'); //cssプロパティ順序
var sass = require("gulp-sass");//cssコンパイル
var autoprefixer = require("gulp-autoprefixer");//ベンダープレフィックス
var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理
var notify = require('gulp-notify'); //エラーを通知
var imageOptim = require('gulp-imageoptim'); //画像圧縮(画像)
var changed = require('gulp-changed'); //変更のあったもの(画像)
/// cssコンパイル ////////////////////////////////////////////
gulp.task("sass", function() {
gulp.src("scss/*scss")
.pipe(cache('sass'))
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(csscomb())
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(autoprefixer())
.pipe(gcmq())
.pipe(gulp.dest("./css"))
.pipe(notify({
title: 'Sassをコンパイルしました。',
message: new Date(),
sound: 'Tink',
}));
});
/// 画像圧縮 ////////////////////////////////////////////
//差分監視画像フォルダ
var pathsIMG = {
srcDir : 'img/',
dstDir : 'img/dest'
}
gulp.task('images', function() {
var srcGlob = pathsIMG.srcDir + '*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = pathsIMG.dstDir;
return gulp.src( srcGlob )
.pipe(changed( dstGlob ))
.pipe(imageOptim.optimize())
.pipe(gulp.dest( dstGlob ))
.pipe(notify({
title: '画像を圧縮しました。',
message: new Date(),
sound: 'Tink',
}));
});
/// 監視フォルダ ////////////////////////////////////////////
gulp.task('watch', function(){
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('img/*.+(jpg|jpeg|png|gif|svg)', ['images']);
});
/// Gulpコマンドで動かすもの ////////////////////////////////////////////
gulp.task('default', ['watch']);
簡単に説明しますと、scssについては、cssへコンパイルする時にスタイル順序の整理、ベンダープレフィックスの付与、メディアクエリーごとのスタイルの整理を行った上でcssにコンパイルします。
その際のアウトプットスタイルをexpandedにしています。
画像ファイルについては、まず格納フォルダ内に差分が発生していないかチェックします。これをしておかないと毎回画像ファイルを全て圧縮してしまうことになり煩わしいので、初期差分チェック後に更新があるものだけを圧縮してアウトプットするという流れにしています。
PCにインストールしている「ImageOptim」を使用しますので、インストールしておいてください。
その他に記述されていることは、watch中のエラーを回避するもの、gulpコマンドが実行したあとにデスクトップ通知をするものなどですので、こちらも是非入れておきましょう。
Gulpファイル群の配置の仕方
初めてGulpをインストールして使う場合は、案件フォルダに対してGulpをインストールすると思います。
■通常の配置の仕方
ーーーーーーーーーーーーーー
案件A
├─ package.json
├─ gulpfile.js
├─ /node_modules
│ ├─ gulp-sass
│ ├─ gulp-autoprefixer
│ └─ ・・・
├─ /js
├─ /img
├─ /sass
├─ /css
└─ index.html
ーーーーーーーーーーーーーー
これだと、案件が増える度にpackage.json、gulpfile.js、node_modulesが必要になってしまい、ファイルがすぐに肥大化してしまいます。とくにnode_modulesは150MB近くありますので、できれば複製せずに使いまわしていきましょう。
複数案件でGulpファイルを共有する配置
そこで私が考えたのが、package.jsonとnode_modulesを使いまわし、gulpfile.jsのみ案件ごとに用意するという配置です。
■複数案件で使いまわす配置の仕方
ーーーーーーーーーーーーーー
htdocs
│
├─ 案件A
│ ├─gulpfile.js
│ ├─/node_modules[シンボリックリンク]
│ ├─ /js
│ ├─ /img
│ ├─ /sass
│ ├─ /css
│ └─ index.html
│
├─ 案件B
│ ├─gulpfile.js
│ ├─/node_modules[シンボリックリンク]
│ ├─ /js
│ ├─ /img
│ ├─ /sass
│ ├─ /css
│ └─ index.html
│
│
/node_modules[シンボリックリンク元]
│ ├─ gulp-sass
│ ├─ gulp-autoprefixer
│ └─ ・・・
package.json
ーーーーーーーーーーーーーー
大元の親フォルダ[htdocs]の中に案件フォルダを作ります。
親フォルダの中にnode_modulesとpackage.jsonを配置します。そのnode_modulesをシンボリック元として利用します。
案件フォルダの中にnode_modules[シンボリックリンク]を作ります。
作り方は、超簡単です。
MACでいう「エイリアスを作成」、Windowsでいう「ショートカットの作成」です。
シンボリック元のnode_modulesフォルダに対して、上記の方法でショートカットを作ってください。
※上記のシンボリックリンクでうまく動作しない場合は、コマンドラインからシンボリックリンクを作成してください。
cdコマンドで案件フォルダにに移動して、大元のnode_modulesまでのパスに対してシンボリックリンクを作成します。
私の場合は下記のように置いてありますので
Users/[username]/docker/taskrun/node_modules
$ ln -s /Users/[username]/docker/taskrun/node_modules ./node_modules
とコマンドをたたくとシンボリックリンクが作成されていると思います。
package.jsonはシンボリックを作らなくてけっこうです。
gulpfile.jsもシンボリックにすればいいじゃん！とも考えました。
そもそもそれだとGulpコマンドが実行できないということもあるのですが、サイトごとにフォルダ構成も変わることがありますし、実はgulpfile.jsはその都度作るというのが一番安全な運用かなと思います。
以上がりょうま的Gulpを使った爆速コーディング環境です。
今まで手間をかけていた部分が減り、機械的に運用できるのでコーディングミスも減りました。チーム運用であれば、gulpfile.jsをメンバーに配り、それを元にコーディングクオリティの均一化に成功しています。
Gulpは大変便利なものではありますが、この運用にいきつくまでに色々調べました。
現状自分の中では、これがマスト運用かなと思います。
また新しいアプローチができれば、シェアしていきたいと思います！
[st-card id=591 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
[st-card id=603 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
[st-card id=610 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
