gulpとgulp-sassで快適コーディング環境構築
Gulpとは
Gulpとは作業を自動化できるタスクランナーの一種です。タスクランナーを使うことで、煩雑な作業を自動化してコーディングに集中して作業の高速化が図れます。
設定方法などは普段使っているJavaScriptで記述可能です。
*若干古い記事になっております。最新のGulp ver.4.xに対応する記事はこちら。
下準備
gulpを使うにはNode.jsをインストールする必要があります。
【参考】node.jsとは？
node.jsのインストール
インストールはターミナルの他にインストーラーで簡単にインストールできます。
インストーラーでのインストール
【日本語サイト】
http://nodejs.jp/nodejs.org_ja/
ダウンロードしてインストーラーでインストールでOKです。
ターミナルでのインストール
ターミナルでインストールするならMacの場合はHomebrewからインストールができます。
【Home-brew WEB SITE】
http://brew.sh/index_ja.html
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ちなみにHomebrewのアップデート方法
$ brew update
node.jsのインストール
$ brew install node
node.jsのバージョン管理用のアプリケーション「n」のインストール(これより有名なnvmというものもあります）。
こちらをインストールしておくと「npm」を「n」というショートコードで入力できます。
$ nam install -g n
-gオプションがグローバル環境へのインストールという意味になります。node.jsのバージョンによって動かないパッケージがあるので、バージョン切り替えができるツールがあると便利だそうです。
//ターミナル //node.jsのバージョン一覧表示 $ n list
//node.js安定バージョンの確認 $ n —-stable
//node.js最終バージョンの確認 $ n --latest
//バージョン切り替え $ n latest
//特定バージョンへの切り替え $ n 7.3.0
npm本体のアップデート
$ npm update -g npm
すべてのグローバルパッケージのアップデート
$ npm update -g
古いグローバルパッケージ確認方法
$ npm outdated -g
npmのパッケージ（プラグイン）のバージョン管理にnpm-check-updatesプラグインを使うと楽です。
$ npm install -g npm-check-updates
//バージョンチェック $ ncu
//アップデート $ ncu -u
これでnode.jsの設定は完了です。
Gulpの設定
Gulpをまずグローバルにインストール
$ npm install -g gulp-cli
作業環境でのインストールと設定
Gulpを作業環境にインストールします。
作業環境にもインストールしないと使えませんので、まずは作業を行うディレクトリまで移動し、npmの初期化を行います。
//Macの場合 $ cd /Users/$(whoami)/project_directory/
//npmを初期化 $npm init
いろいろ設定を聞いてきますので、適切に入力します。
（すべてYesでもいけます）
作業ディレクトリにpackage.jsonとうファイルが作成されます。
package.jsonにrepositoryのエラーが出ないように「,”private”: true」の記述を追加します。
{
"name": "workspace",
"version": "1.0.0",
"description": "my workspace",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"private": true
}
Gulp本体も作業環境にインストールします。オプションで–save-devをつけます。
【参考】http://hblog.glamenv-septzen.info/entry/2015/03/22/233241
$ npm install —-save-dev gulp
gulp-sassプラグインのインストール
Sassファイルをコンパイルしてくれるgulp-sassをインストールします。
$ npm install --save-dev gulp-sass
Browser-syncのインストール
あと便利な機能として、ファイルが更新されるとブラウザも自動でリロードしてくれるようにするBrowser-syncもインストールします。
$ npm i browser-sync —-save-dev
gulp-sourcemapsのインストール
また、ブラウザのコンソールから該当のCSSがSassファイルで何行目か表示できるようにするsourcemapsを作ってくれるプラグインもインストールします。
$ npm i gulp-sourcemaps --save-dev
gulp-plumberとgulp-notifyのインストール
gulpのwatchメソッドで監視をする際に、Sassのコンパイル時にエラーが出ると処理が止まってしまいます。
gulp-sassの処理をする中で「.on(‘error’, sass.logError)」を追記すれば処理が止まってしまうこともありません。
しかし、エラーが起きているのかが分かりづらくなってしまいます。
そこで、処理の中断を阻止するgulp-plumberプラグインとエラー表示をディスクトップ通知をしてくれるgulp-notifyプラグインをインストールします。
$ npm install gulp-plumber --save-dev
$ npm install gulp-notify --save-dev
gulpfile.jsの作成
次にgulpfile.jsファイルを作成します。
こちらのファイルで様々な自動化処理を設定させます。
//まずは各プラグインを変数に読み込ませます。
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync =require('browser-sync'),
sourcemaps = require('gulp-sourcemaps');
//Sassや書き出しするCSSやsource mapsのディレクトリなどのパスを変数に格納
var paths = {
'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
'css':'./public_html/css/',//CSSファイルの書き出しディレクトリ
'root':'./public_html/',//HTMLルート
'sourcemaps':'sourcemaps/'
}
//gulpのタスク（仕事）の設定
gulp.task('scss',function() {
return gulp.src(paths.scss + '**/*.scss')
.pipe(plumber({//エラー時中断阻止の設定
errorHandler: notify.onError({//ディスクトップ通知の設定
title:'Sassコンパイルエラー',//デスクトップ通知のタイトル（入れなくともOKですが入れるとわかりやすいです）
Error: "<%= error.message %>"//エラーメッセージ
}
)
}))
.pipe(sourcemaps.init())//sourcepamsの初期化（作成）
.pipe(//sassコンパイルの設定
sass({
outputStyle: 'expanded',//通常のCSSスタイルの書き出し（ほかにもオプションあり）
}))
.pipe(sourcemaps.write(paths.sourcemaps))//sourcemapsの書き出しディレクトリ
.pipe(gulp.dest(paths.css));//CSSの書き出しディレクトリ
});
gulp.task('browser-sync',function(){//browser-syncのタスク設定
browserSync({
server :{
baseDir:paths.root//HTMLページが格納されているディレクトリ
}
});
});
gulp.task('bs-reload',function(){
browserSync.reload(); //ブラウザの自動リロード設定
});
//gulpのデフォルトのタスクの設定
gulp.task('default',['browser-sync'],function() {//Defaultの実行（gulp）に含める処理
gulp.watch(paths.root + '**/*.*',['bs-reload']);//watchでブラウザリロードの監視
gulp.watch(paths.scss + '**/*.scss',['scss']);//watchでscssの監視
});
gulp.task(‘default’〜で設定した箇所はターミナルで「gulp」と打ち込んだときに動作します。
$ gulp
こちらでブラウザのリドード設定を動かしたり、watchメソッドを使って変更があるファイルなどがあれば実行するように設定しています。
また、gulp scssなど個別のタスクを実行することも可能です。
$ gulp scss
フレームワークとして、Bootstrapを使ったり、グリッドレイアウトのBourbon neatやSusyを使ったりなどの設定方法もあります。
その辺りはまた後日。
