こんにちは

寒い日が続きますね。新人エンジニアの小木です。最近メガネをはずしたときの自分の顔が変に見えます。。。

さて今回は第五回のgulpの話の続きをしていきたいと思います。前回を見ていない方は以下から飛んで読んでみてください。

新米エンジニア小木の議事録　vol.5（Gulpについて）

今回のブログでは

まずオススメプラグインを一覧で紹介します。
その中で業務を爆速にしてくれるものを実際のコードと交えて紹介していきます。
その後は社内などで効率的に案件ファイルを共有することになっても楽に引継ぎができるような環境構築を紹介していきます。

オススメプラグイン一覧

プラグインの紹介はここにあるのですが、この中でも実際に使ってみて便利だなと思ったものを一覧にしてみました。

• gulp-sass　（sassのコンパイル）
• gulp-autoprefixer　（cssのオートプレフィクサー自動付与）
• gulp-uglify　（jsのコンパイル）
• browser-sync　（ブラウザ同期）
• gulp-ejs　（htmlのテンプレートなど）
• gulp-rename　（ファイルの名前を変更）
• gulp-babel　（トランスパイラ）
• gulp-plumber　（エラーが出ても処理を止めない）
• gulp-csscomb　（cssの整形）

などが挙げられます。まだまだ便利なプラグインがありますのでぜひ公式ページをチェックしてみてください。

この中でもオススメなものがあります！

・autoprefixer
これは前回例として使わせていただきましたものです！
一つひとつベンダープレフィックスをつけるのは大変だし抜けがあったら困るものですがそんなものはgulpで自動的に行ってノーミスでコーディングしちゃいましょう！

・browser-sync（ブラウザ同期）
これを利用することによってコーディングしつつブラウザ同期がすることができます。これにwatch機能を併用することによって保存するたびブラウザ同期が行え効率化を図ることができるかと思います。保存しつつブラウザに反映することができます。またコードを書いてCtrl+Rとかがめんどくさいなと思っている方には朗報です。

・plumber
配管工という意味です。ちなみにマリオの職業はこのplumberです。そして日本で作られましたがイタリア人です。そして英語を話します。。。
このplumberはgulpのエラーを制御する働きを持っています。gulpはエラーが出るとタスクが停止してしますのですがplumberを使用することでエラーがでつつも作業を継続させてくれます。またエラーはコマンドプロンプトに表示されます。

・csscomb
これはcssの並び順を適当に変更してくれるものです。実際にきちんと指定することでチーム間のコード管理などにも役立ちます。

・rename, copy
renameはその名の通りファイルの名前を変更することができます。
またcopyはプラグンではなくデフォルトの機能なのですが、例えばsrcというディレクトリとpublicという2種類のディレクトリを作成しsrcはコーディング専用、publicは普段さわらないもので本番用という風に分けてコーディングをすることができます。srcで書いたものをpublicへコピーし移動するということが可能になります。そうすることで本番環境にアップするときに間違って関係のないファイルをアップすることを防ぐことができますね！

などがオススメのプラグインになります。他にもいろいろ知らない便利なプラグインがたくさんあるので是非公式ページにて確認してみてください。

https://gulpjs.com/plugins/

Sassについて

Sassは便利すぎて今では手放せないものとなってしましました。（筆者談）なのでそのやり方を簡単に紹介していきたいと思います。

今回はgulp-sassを使用したいと思います！

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('scss', function () {
	gulp.src('src/**/*.scss')
		.pipe(sass())
		.pipe(gulp.dest('public/'));
});
//監視ファイル
gulp.task('default', ['scss'], function () {
	gulp.watch('public/css/*.css');
});

まずは1,2行目で変数宣言をします。

そして4,5,6,7,8行目でタスクを書きます。

そして一番下に監視としてwatchを付け加えます。そうすることで保存するたび変更点が反映されます！

ここで！

以下の一行をpackage.jsonに書き足します。

"scripts": {
    "dev": "gulp"
}

こうすることでデフォルトのタスク実行として’gulp’と実行していたと思いますがこうすることでnpm run dev とすることができます。
この利点としてはグローバルにgulpを置かなくても実行できる点です。グローバルにgulpを置くとチーム間で作業をするときにバージョンの差が出てしまい作業に支障がきたすこともあります。しかし案件ごとにnode_muduleをダウンロードすることでpackage.jsonに書かれているバージョンで作業を統一できます。

グローバルに置く、置かないとそれぞれメリットデメリットがあるかと思いますが一度試してみてみてください！

まとめ

今回2回にわたってgulpについて書かせていただきました。皆様の作業が効率化できることをお祈りしています！！