LOG IN

Gulp

by kuroko

Gulpとは?

Gulpとは、タスクランナーと呼ばれ、Node.jsで動くツールです。次のような複雑な処理を自動化でき、効率的にコーディングができます。
・Sassのコンパイル
・CSSの記述の効率化(並べ替え、必要なものにベンダープレフィックスをつける)
・CSSやJavaScriptの圧縮
・リアルタイムプレビュー

通常はnpmというツールを使って、目的に応じたプラグインを導入・管理します。

言葉の説明

Node.js

Node,jsとは、JavaScriptの一種でサーバーサイドでも実装できるように機能を追加したもの。コマンドでGulpを呼び出せば、あらかじめ設定した処理を自動で行ってくれます。

npm

Node.jsのパッケージを管理するためのツール。インストールしたパッケージの情報などが、「package.json」というファイルに記録され、効率的な管理ができます。

参考サイト

npmでnode.jsのpackageを管理する - Qiita

導入方法

コマンドを触るので、導入にハードルが高いと思われがちですが、次のようなサイトで導入をわかりやすく説明してくださってるので、ご参考ください。

5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ _ 株式会社LIG

ファイル構成

Gulpに必要なファイルを入れるフォルダ(ここではcomponents)にGulpやプラグインのファイルをまとめています。ファイルの構成は、人によって違うと思いますが、私は次のような形で使っています。

-- components
¦-- node_modules //プラグインのファイル
¦ ¦--browser-sync
¦ ¦--gulp
¦ ¦--gulp-clean-css
¦ ¦--gulp-csscomb
¦ ¦ ...etc.
¦
¦-- sass //.scssのファイル
¦ ¦--_normalize.scss
¦ ¦--_variables.scss
¦ ¦--style.scss
¦
¦-- package.json
¦-- gulpfile.js
¦-- .csscomb.json

-- css
-- js
-- index.html

Gulpのプラグイン

gulp.jsのpluginページを見ると多数のプラグインがありますが、普段使っているもののうち7つピックアップして紹介いたします。

browser-sync

ファイルを保存すると自動的にブラウザをリロードしてくれます。同ネットワーク内であれば、指定のIPへアクセスすると表示できるので、他の端末からも確認できます。また、接続中の端末全てでスクロールを連動させたり、CSSのアウトラインやグリッドを表示することもできます。

gulp-ruby-sass

Sassを使えるようにします。もちろんCSSへのコンパイルもできます。

gulp-plumber

Gulpでの処理中にエラーがでても、watchなどのタスクをそのまま継続することができます。

gulp-pleeease

ブラウザのバージョンに応じたCSSのベンダープリフィクスなどを、自動でつけてくれます。

gulp-csscomb

CSSプロパティを「.csscomb.json」のファイルに書かれてある順番に並べ替えます。

gulp-clean-css

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

gulp-imagemin

PNG, JPEG, GIF, SVGなどの画像ファイルを圧縮します。

プラグインのインストール

各プラグインのページにもインストールのコマンドが記載されていますが、基本的には「npm install [プラグイン名]」をコマンドで打つとインストールができます。例えば「gulp-plumber」をインストールしたい場合は次のようになります。

npm install gulp-plumber

「--save-dev」オプションをつけることで、package.jsonに情報が記録されて、次回から同じ環境を構築できるようになるので、普段は次のような書き方をしています。

npm install --save-dev gulp-plumber

コマンドのオプションについては、こちらのサイトで詳しく説明されているのでご参考ください。
現場で使えるgulp入門 - gulpとは何か _ CodeGrid

gulpfile.js

gulpfile.jsでプラグインの設定をします。

/*--------------------------------------------
パッケージ読み込み
--------------------------------------------*/
var gulp      = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var pleeease = require('gulp-pleeease');
var csscomb = require('gulp-csscomb');
var cleanCSS = require('gulp-clean-css');
var imagemin = require("gulp-imagemin");


/*--------------------------------------------
初期設定
--------------------------------------------*/
var root_dir = '../';
var css_dir = '../css/';
var proxy = 'http://localhost/';


/*--------------------------------------------
開発用タスク
--------------------------------------------*/
// ローカルサーバー起動
gulp.task('server', function() {
browserSync.init({
files: [theme_root_dir],
proxy: proxy,
watchOptions: {
ignoreInitial: true,
ignored: [theme_root_dir + '**/*.scss', theme_root_dir + '.git/']
}
});
});

// SASSコンパイル・プリフィクス追加・並び替え・CSSの圧縮
gulp.task('sass', function() {
return sass('./' + 'sass/*.scss')
.on('error', sass.logError)
.pipe(plumber())
.pipe(pleeease({
minifier: false,
fallbacks: {
autoprefixer: ['last 4 versions', 'ios 6', 'ie 8']
}
}))
.pipe(csscomb())
.pipe(cleanCSS())
.pipe(gulp.dest(css_dir));
});

// 画像圧縮
gulp.task("minimg", function() {
return gulp.src([root_dir + 'images/*.jpg', root_dir + 'images/*.png'])
.pipe(imagemin())
.pipe(gulp.dest(root_dir + 'images/'));
}


/*--------------------------------------------
監視用タスク
--------------------------------------------*/
gulp.task('watch', function() {
gulp.watch(root_dir + '**/*.scss', ['sass']);
});


/*--------------------------------------------
タスク開始
--------------------------------------------*/
gulp.task('default', ['server', 'watch']);


実行

ターミナル(コマンドプロンプト)を立ち上げて、Gulpに必要なファイルを入れるフォルダ(ここではcomponents)をディレクトリに設定します。

「gulp」と入力して「Enter」。

Gulpが起動され、監視されたブラウザが開きます。終わるときは、「ctrl+c」で終了できます。


kuroko
OTHER SNAPS