今まで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
[…] Web制作に便利そうなGulp.jsのプラグインをインストールしてみる […]