CREATOR BLOG

gulpとgulp-sassで快適コーディング環境構築

gulpとgulp-sassで快適コーディング環境

Gulpとは

Gulpとは作業を自動化できるタスクランナーの一種です。タスクランナーを使うことで、煩雑な作業を自動化してコーディングに集中して作業の高速化が図れます。
設定方法などは普段使っているJavaScriptで記述可能です。

下準備

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 neatSusyを使ったりなどの設定方法もあります。

その辺りはまた後日。

    ▲ PAGE TOP