Re:ゼロから始めるgulpの便利なプラグイン生活

このエントリーは、エキサイト Advent Calendar 2016の12/25の記事です。

こんにちは!今年も寂しいクリスマスを迎えました、ニュースチームの加藤です。
そして、エキサイト Advent Calendar 2016の最後のエントリになります。

Re:ゼロから始めるgulpの便利なプラグイン生活_f0364156_15395068.png

昨今はreact.jsだのangular.jsだのjavascriptの世界が依然としてにぎわっている印象です。
javascriptの学習コストも以前より格段に上がってきております。そして、このトレンドの移りで欠かせないのがフロントエンドでのタスクランナーの活用がありますね。
今回は、その中でもgulpについて書きたいと思います。(あと、タイトルをパクりたかっただけです。笑)

まず、よく問われるのがgulpとgruntって結局どっちがいいの?っていうお話があります。
簡単に基本情報をまとめてみました。



gulpとgruntの基本情報について

基本情報は、以下です。
gulp grunt
24,529 Star★ 11,221 Star★
2013/6/30 2011/09/18
gulpfile.js Gruntfile.js
nodeのプラグイン Gruntのプラグイン

やや、gulpの方が皆さんの関心が強いのかなという印象です。
では、gulpのメリット・デメリットはなんなの?っていう話にもなります。

メリット

・gruntに比べるとコード量が少なく、設定ファイルでのタスクの記述が簡単
・StreamApiを利用することでファイルを毎回書き出すgruntより高速に処理が可能

デメリット

・NodeとJavascriptの知識が必要
・複雑なことは、gruntのが優秀。

自分の肌感ですが、サクッとタスクランナー入れちゃうならgulp、チーム開発で複雑なこともやっておきたい場合はgruntなのかなーという感じでいます。
ざっと、gulpの基本情報はこんな感じです。
そして、インストールの部分からお話しようかと思いましたが、以下がわかりやすかったのでここでは割愛します。笑

gulpのインストールから基本設定まで

ここからはおなじみのプラグインもしくは、役に立つなと思ったプラグインを5つ紹介していきます。


gulpの便利なプラグインについて


サポートブラウザの稼働確認は非常に重要ですが、CSSのベンダープレフィックスを付与し忘れたり、タイポによってバグが発生するケースがあります。
また、ベンダープレフィックスを付与することで、CSSファイル自体の容量もでかくなってしまうことがあります。
そんな時は、こちらのgulp-autoprefixerで、CSSのベンダープレフィックス付与を自動化することを考えてみてはいかがでしょうか?


インストール
$ npm install gulp-autoprefixer --save-dev

タスクの書き方(例)
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('auto-prefixer', function () {
return gulp.src(['src/css/*.css'])
.pipe(autoprefixer())
.pipe(gulp.dest('dist/css'));
});

最初なので、タスクの実行の流れを見ます。

(1)gulp.srcでファイル元を指定
(2)gulp-autoprefixerで、自動でCSSのベンダープレフィックスを自動付与
(3)生成されたファイルを’dist/css’のディレクトリに出力

autoprefixerでは、オプションの指定もでき、以下のようにautoprefixerを指定すれば、ブラウザのversionも指定なんてこともできます。

.pipe(autoprefixer({
browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4']
}))


ファイルを編集⇨保存した時に、毎回ブラウザをリロードして確認っていうのが割と面倒だったりする時があります。
このbrowser-syncを使えば、ファイル編集をするたびにブラウザを全て自動でリロードしてくれます。
例えば、cssの修正なんかを各種ブラウザで確認したい場合なんかに役に立ちそうです。
ディスプレイに各種ブラウザを開き、修正を入れた直後にリロードが走るので、修正の確認が非常にスピーディになるかと思います。


browser-syncの特徴は以下の通りです。
(1)同じネットワークにある端末は全て同期される
(2)ユーザーのアクションも全て同期される。
ですので、非常に作業効率があげられる可能性があります。

インストール
$ npm install browser-sync --save-dev

タスクの書き方(例)
var gulp = require('gulp');
var browserSync = require("browser-sync");

gulp.task('browser-sync', function() {
return browserSync.init({
server: {
baseDir: './src/'
}
})
})

gulp.task('reload', function() {
browserSync.reload();
})

gulp.task('watch', browser-sync, function () {
gulp.watch('./src/css/*.css', ['reload']);
});

gulp watchコマンドを叩き、ファイル編集を行えばリロードせずに修正内容を確認できます。
非常に便利ですね。



gulpは基本的に並列で処理されています。
タスクの実行に関して、jsやcssを圧縮してからsyncしたいという場合もあるかと思います。
その場合、複数のタスクの実行順序を指定することが可能です。


インストール
$ npm install run-sequence --save-dev

タスクの書き方(例)
var gulp = require('gulp');
var runSequence = require('run-sequence');

gulp.task('default', function(callback) {
return runSequence(
'clean',
[‘cssmin', ‘uglify'],
'deploy',
callback
);
});

こちらでは、cleanタスクを実行後、並列でcssmin、uglifyを実行し、最後にdeployを実行する流れになります。
ここで注意したいのは、各gulpタスクのreturnを忘れないようにすることです。
同様の処理を以前書いた時に、cssminやuglifyなどのタスクでreturnの記述を忘れ、圧縮されたファイルをdeployされないことがありました。
各タスク処理内でreturnを省いていると非同期で実行されてしまうことがあるので、注意してください。run-sequenceを使わなくてもgulpのタスクの記述はreturnを忘れないようにという意識で大丈夫です。



こちらでは、cssのlintチェックをしてくれます。


インストール
$ npm install gulp-csslint --save-dev

タスクの書き方(例)
var gulp = require('gulp');
var csslint = require('gulp-csslint');

gulp.task(‘csslint', function() {
gulp.src('css/*.css')
.pipe(csslint())
.pipe(csslint.reporter());
});

これで、gulp csslintのコマンド実行で、lintチェック結果が出力されます。
ただ、このままだと大量のwarningやerrorがでる可能性があり、チェック項目の設定を行うのが良いと思います。以下のように書くと良いかと思います。

gulp.task('css', function() {
gulp.src('css/*.css')
.pipe(csslint({
"empty-rules": false, // 空のセレクタをチェック
"display-property-grouping": false, //指定が誤っているプロパティをチェック
"import": false, //他の外部cssを読み込んでいるかチェック
"known-properties": false, // 存在しないプロパティがないかチェック
"star-property-hack": false, // 古いブラウザ対策
}))
.pipe(csslint.reporter());
});

また、こちらのチェック項目についてはたくさんの項目があります。
チェック項目についてはこちらのドキュメントが参考になります。
多くのチェック項目がある場合、gulpfile.jsの肥大化してしまいますので、外部ファイル化して読み込むというのもありかなと思います。



gulpでシェルスクリプトを実行したいという時に活躍しそうなのが、このgulp-execです。
例えば、デバッグの際にも活用できそうな感じがしています。

インストール
$ npm install gulp-exec —save-dev

タスクの書き方(例)
var gulp     = require('gulp');
var exec = require('gulp-exec');

gulp.task( 'debug', function(){
var dir = ‘cd ~/src/css/'
var ls = 'ls -la';
return gulp.src( srcGlob )
.pipe(exec( dir ))
.pipe(exec( ls ))
.pipe(exec.reporter());
});

このタスクをrun-sequenceを併用し、sync直前とか一時的にファイルの生成ができているのか確認したい時なんかに使用しても有効なんじゃないかなと思います。



まとめ

以上、簡単にgulpについてお話しましたが、意外と知らなかったプラグインもあるもんだなーとか、あの時これ入れとけばよかったかもみたいなものいくつかありました。こういうのは頭の片隅にいれておいても損はないかなと思います。そうすれば、導入検討が楽に行えますね。

話は変わりますが、先日エキサイト検索をリニューアルした際では、gulp + webpackを使用しました。gulp + webpackみたいにしたい人もいると思うので、webpackについての詳しい説明は「Re:ゼロから始めるwebpack生活」を参考にしてみてください。


これにて、エキサイト Advent Calendar 2016は終わりです。
お楽しみいただけましたでしょうか?
それでは、よいクリスマスを!メリークリスマス!!


エンジニア募集

エキサイトではエンジニアとして一緒に働いてくださる方を
新卒採用中途採用で募集しています。
詳しくは、こちらの採用情報ページをご覧ください。


by ex-engineer | 2016-12-25 10:00