Web制作に便利そうなGulp.jsのプラグインをインストールしてみる

今までSassやEJS、watchを試してきましたが、今回はそれ以外の便利そうなプラグインを色々インストールして試してみます。

今までのまとめ

今までやったことを簡単にまとめてみます。

作業ディレクトリに移動。

cd 作業ディレクトリ名

プロジェクトファイルの作成。

npm init

Gulp.jsをローカルにインストール。

npm install gulp@3.8.11 --save-dev

Sassのインストール。

npm install gulp-sass --save-dev

EJSのインストール。

npm install gulp-ejs --save-dev

gulp-plumberのインストール。

npm install gulp-plumber --save-dev

gulpfile.jsファイルを作成し、以下のように記述。

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

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

watchの実行。

gulp watch

これで、SassやEJSファイルを変更すると自動でコンパイルされるようになります。
　

ベンダープレフィックスの自動追加

ベンダープレフィックスを自動で付与してくれるautoprefixerをインストールしてみます。

npm install gulp-autoprefixer --save-dev

gulpfile.jsファイルのSass処理部分にautoprefixerを追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var ejs = require('gulp-ejs');
var autoprefixer = require('gulp-autoprefixer');

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

試しにdisplay: flex;とtransformを入力してコンパイルしてみます。

Sass

.test {
	display: flex;
	transform: translate(50px, 50px);
}

コンパイル後は以下のようになります。

CSS

.test {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate(50px, 50px);
      -ms-transform: translate(50px, 50px);
          transform: translate(50px, 50px); }

autoprefixerはCan I use… Support tables for HTML5, CSS3, etcのサイト情報をもとにベンダープレフィックスが必要かチェックしているそうです。
　

画像の最適化

画像(jpg,png,gif,svg)をロスレスで軽量化してくれるimageminをインストールしてみます。

npm install gulp-imagemin --save-dev

合わせて、より圧縮率の高いpngquantをインストールして使ってみます。

npm install imagemin-pngquant --save-dev

gulpfile.jsファイルにimageminの処理を追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var ejs = require('gulp-ejs');
var autoprefixer = require('gulp-autoprefixer');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
});

// 画像圧縮処理
gulp.task('imagemin', function() {
	gulp.src('./img/**/*.+(jpg|jpeg|png|gif|svg)')
	.pipe(imagemin({
		progressive: true,
		use: [pngquant({quality: '65-80', speed: 1})]
	}))
	.pipe(gulp.dest('./img/'));
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

これで使ってみたのですがなぜか、うまく軽量化されませんでした。
　

画像の最適化2

拡張子ごとに個別のプラグインを使用してみます。

gifの軽量化。

npm install imagemin-gifsicle --save-dev

jpgの軽量化。

npm install imagemin-jpegtran --save-dev

pngの軽量化。

npm install imagemin-optipng --save-dev

svgの軽量化。

npm install imagemin-svgo --save-dev

gulpfile.jsファイルに処理を追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var ejs = require('gulp-ejs');
var autoprefixer = require('gulp-autoprefixer');
var gifsicle = require('imagemin-gifsicle');
var jpegtran = require('imagemin-jpegtran');
var optipng = require('imagemin-optipng');
var svgo = require('imagemin-svgo');

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
});

// 画像圧縮処理
gulp.task('image', function() {
	return gulp.src('./img/**/*')
	.pipe(gifsicle()())
	.pipe(jpegtran()())
	.pipe(optipng()())
	.pipe(svgo()())
	.pipe(gulp.dest('./img/'));
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

一応圧縮はできたのですが、実際に使う場合はオプションで圧縮率の調整がいりそうです。
　

ブラウザの自動更新

ブラウザの自動更新、複数のブラウザを同期するbrowser-syncをインストールしてみます。

npm install browser-sync --save-dev

gulpfile.jsファイルに処理を追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var ejs = require('gulp-ejs');
var autoprefixer = require('gulp-autoprefixer');
var gifsicle = require('imagemin-gifsicle');
var jpegtran = require('imagemin-jpegtran');
var optipng = require('imagemin-optipng');
var svgo = require('imagemin-svgo');
var browserSync = require('browser-sync');

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'))
	.pipe(browserSync.reload({stream:true}))
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
	.pipe(browserSync.reload({stream:true}))
});

// 画像圧縮処理
gulp.task('image', function() {
	return gulp.src('./img/**/*')
	.pipe(gifsicle()())
	.pipe(jpegtran()())
	.pipe(optipng()())
	.pipe(svgo()())
	.pipe(gulp.dest('./img/'));
});

// ブラウザ更新
gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: './'
		}
	});
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

// デフォルト
gulp.task('default', ['browser-sync'], function() {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

デフォルトのタスクも合わせて作成しました。

gulp

と入力すると、browser-syncが実行され、ブラウザでhttp://localhost:3000/が開かれます。
この状態で別ブラウザでもhttp://localhost:3000/を開くと、スクロールなどが同期されます。

watchも一緒に実行されているので、この状態でファイルを変更すると、ブラウザが自動で更新されるようになります。
　

スタイルガイドの作成

スタイルガイドジェネレータはいくつかあるみたいですが、今回はstyledoccoを使ってみます。

npm install gulp-styledocco --save-dev

gulpfile.jsファイルに処理を追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var ejs = require('gulp-ejs');
var autoprefixer = require('gulp-autoprefixer');
var gifsicle = require('imagemin-gifsicle');
var jpegtran = require('imagemin-jpegtran');
var optipng = require('imagemin-optipng');
var svgo = require('imagemin-svgo');
var browserSync = require('browser-sync');
var styledocco = require('gulp-styledocco');

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'))
	.pipe(browserSync.reload({stream:true}))

	// スタイルガイド用
	gulp.src('./styleguide/styleguide.scss')
	.pipe(plumber())
	.pipe(sass())
	.pipe(autoprefixer())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./styleguide'))
	.pipe(styledocco({
		out: './styleguide',
		name: 'My Project',
		'no-minify': true
	}))
	.pipe(browserSync.reload({stream:true}))
});

// EJS処理
gulp.task('ejs', function() {
	// 対象にするファイル
	gulp.src(['./ejs/**/*.ejs', '!' + './ejs/**/_*.ejs'])
	.pipe(plumber())
	.pipe(ejs())
	// 出力先
	.pipe(gulp.dest('./'))
	.pipe(browserSync.reload({stream:true}))
});

// 画像圧縮処理
gulp.task('image', function() {
	return gulp.src('./img/**/*')
	.pipe(gifsicle()())
	.pipe(jpegtran()())
	.pipe(optipng()())
	.pipe(svgo()())
	.pipe(gulp.dest('./img/'));
});

// ブラウザ更新
gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: './'
		}
	});
});

// watch処理
gulp.task('watch', function () {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

// デフォルト
gulp.task('default', ['browser-sync'], function() {
	gulp.watch('sass/**/*.scss', ['sass']);
	gulp.watch('ejs/**/*.ejs', ['ejs']);
});

今回はstyleguideディレクトリ内に専用のCSSを出力して、スタイルガイドを作成するようにしました。
ただページ用のCSSにスタイルガイド用のコメントが残ってしまうので、どうにかできないか考え中です。

スタイルガイド用の内容は、CSSのコメント(⁄**/)内にマークダウン記法で記述します。
とりあえず使いそうなものだけピックアップしてみます。

#	hXタグ。#の数がXの数になる。
“` ～ “`	HTMLタグを記述する。複数行になってもOK。

今回サンプルで作ったSassは、コンパイル後以下のようになりました。

CSS

@charset "UTF-8";
/*
##レイアウト用モジュール
###画像+テキスト
`.l-imgR`の説明文。
```
<div class="l-imgR">
	<img src="http://placehold.it/350x150" alt="" class="l-imgR-image">
	<div class="l-imgR-textarea">
		<p class="l-imgR-sentence">テキストテキストテキストテキストテキスト</p>
	</div>
</div>
```
*/
.l-imgR {
  overflow: hidden; }
  .l-imgR .l-imgR-image {
    float: right;
    margin: 0 0 15px 15px; }

.mt10 {
  margin-top: 10px; }

スタイルガイドのデモページ
　

とりあえず試してみただけなので、構成やファイルパスなどは使ってみながら調整したいと思います。
　

【参考サイト】

• Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG
• これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化 | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers
• gulp-imageminとpngquantを使って画像圧縮を効率化する | 技術コラム | つみきブログ
• gulp-imagemin
• imagemin-pngquant
• 俺だけのGulp（ガルプ） | ツクメモ – ウェブやアプリをツクるヒトのメモ
• imagemin-gifsicle
• imagemin-jpegtran
• imagemin-optipng
• imagemin-svgo
• これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers
• HTML5 boilerplateをsassでgulpでstyledoccoな感じにしてみた
• » 美しいスタイルガイドが作れるstyleDoccoを使ってみる | isee ウェブに関するブログ
• gulp-styledocco