2016年、僕のおすすめgulpプラグイン


これは、2015/01/18の公開アップルップル社内勉強会発表用資料です。


gulpはみなさんご存知ですよね?ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。
今回は、以下の4つの項目に分けて、自分のおすすめのプラグインを紹介します。

  • ユーティリティ
  • CSS
  • JavaScript
  • HTML

ユーティリティ

browser-sync

ファイル等の保存時に、ブラウザーをリロードする際に利用します。例えばCSSを変更した際にわざわざブラウザをリロードする手間を省きます

使用例)CSSファイルを保存した際にブラウザをリロードする

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('reload',function(){
	reload();
});
gulp.task('css',function(){
	gulp.src(['css/src/**/*.css'])
		.pipe(autoPrefixer())
		.pipe(cssComb())
		.pipe(minifyCss())
		.pipe(gulp.dest('css/dist'))
		.pipe(notify('css task finished'));
});
gulp.task('default',function(){
	browserSync.init({
            server: "./"
        });
        gulp.watch('css/src/**/*.css',['css','reload']);
});

gulp-plumber

pipe内で、あるプラグインがエラーをおこしても、watchなどのタスクを継続することができます。これがないと、エラーがおこるたびにコマンドで、gulp watchなどと打ち直す必要がでてきます。

gulp-rename

ファイル名を変更する際に使用します。たとえば、main.cssなどのファイルがあったとして、別のプラグインで圧縮して、main.min.cssなどの名前に変更するときなどに便利です。

使用例)ファイル名にminを追加する

gulp.src(['main.css'])
.pipe(rename({
    suffix: '.min'//main.min.css
}))
.pipe(minifyCss())
.pipe(gulp.dest('css/dist'))

gulp-iconfont

使用例)SVG等のファイルからアイコンフォント用のファイル群を生成します。詳しくは以下の記事を参考にしてください。


gulp-notify

タスクが終了した際などにデスクトップ上で通知ができます。

使用例)JavaScriptのタスクが終了した時に、「js task finished」と通知します

gulp.task('js',function(){
	gulp.src(['js/src/**/*.js'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
		.pipe(gulp.dest('js/dist/'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(uglify())
		.pipe(gulp.dest('js/dist/'))
  		.pipe(notify('js task finished'));
});

gulp-concat

たとえば、main.css、sub.cssなどファイルが複数あるときに、それを1つのファイルにする時に便利です。

使用例)

gulp.task('css',function(){
	gulp.src(['css/src/**/*.css'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
		.pipe(concat('main.css'))
		.pipe(gulp.dest('css/dist'))
		.pipe(notify('css task finished'));
});

CSS

gulp-csslint

CSSの文法チェックに使用する

gulp-merge-media-queries

メディアクエリの順番を整頓してくれます。

整理前

@media screen and (max-width:1024px){
	.level1{
		font-size: 18px;
	}
}
.level1 {
	font-size: 20px;
	background-color: red;
	display: block;
	padding: 12px;
	font-weight: bold;
	color: #FFF;
}
@media screen and (max-width:768px){
	.level1 {
		font-size: 16px;
	}
}

整理後

.level1 {
	font-size: 20px;
	font-weight: bold;
	display: block;
	padding: 12px;
	color: #fff;
	background-color: red;
}

@media screen and (max-width:1024px) {

.level1 {
	font-size: 18px;
}

}

@media screen and (max-width:768px) {

.level1 {
	font-size: 16px;
}

}

gulp-autoprefixer

Can I Useを使用して、ブラウザーのベンダープリフィックスを自動付与してくれます。Can I UseとはCSSやJavaScriptのAPIに対するブラウザの対応状況を簡単に調べられるWebサービスです。


ただし、Node.jsのバージョンが、0.1.2より古いと、動作しませんので、バージョンアップするか、polyfillが必要になってきます。polyfillを使用する場合は、es6-promiseをnpm installした後、gulpfile.jsに以下のソースを追加します。

require('es6-promise').polyfill();

gulp-csscomb

プロパティの順番を整理してくれます

プロパティ整頓前

.level1 {
	font-size: 20px;
	position: absolute;
	background-color: #333333;
	display: block;
	top: 0;
	padding: 12px;
	font-weight: bold;
	color: #FFF;
	left: 20px;
}

プロパティ整頓後

.level1 {
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 20px;
	display: block;
	padding: 12px;
	color: #fff;
	background-color: #333;
}

gulp-frontnote


特定のフォーマットでCSSを書く事でCSSのスタイルガイドを自動生成してくれます。個人的に大好きなスタイルガイド生成プラグインです。

使用例)

gulp.task('css',function(){
	gulp.src(['css/src/**/*.css'])
		.pipe(plumber({
			handleError: function (err) {
				console.log(err);
				this.emit('end');
			}
		}))
		.pipe(frontnote({
			out: 'docs/css'//docs/cssにスタイルガイドを生成します。
		}))
		.pipe(gulp.dest('css/dist'))
		.pipe(notify('css task finished'));
});

その際に、CSSは以下のようなフォーマットで記述します。

/*
#styleguide
汎用スタイル

全ページで汎用的に使うスタイルです。

@depulicated
@非推奨
@todo
@common

```
<h1 class="level1">見だし1</h1>
```
*/

.level1 {
	font-weight: bold;
	display: block;
	padding: 10px;
	background-color: green;
}

出力結果は以下のようになります。


gulp-minify-css

CSSを圧縮してくれます。

JavaScript

gulp-jshint

JavaScriptの文法チェックに使用する

gulp-browserify

クライアント側のJavaScriptにもNode.jsのrequireの考え方を導入できます。例えばjQueryなどのライブラリを使用したいが、$でグローバル空間を汚したくないという潔癖性な人等におすすめです。自分も潔癖性なタイプです。

var $ = require("query");

gulp-uglify

JavaScriptを圧縮してくれます

HTML

gulp-minify-html

HTMLファイルを圧縮します。

gulp-ejs

EJS形式で書かれたファイルをHTMLに変換します

最後に...

gulpプラグインは便利ですが、gulpfileのプラグインや設定ファイルを覚えておくのは大変です。そのためにgulp-file生成のぬか床となるWebページを用意していますので良かったら使ってみてください。このブログでご紹介したプラグインはすべて試すことができます。



堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →