【テンプレート】Gulpの開発環境を手早く作る

Gulpを使用してコーディングを始める際に一番ネックなのは、開発環境を構築することだと思います。ファイルのディレクトリ構成やプラグインの選定、インストール等なかなか時間がかかってしまいます。

エラーが出てしまったらもっと最悪です。ちなみに、エラー出た時の解決策は別記事にて紹介しています。

そのような時のために、gulpfileやディレクトリ構成をあらかじめ作成しているテンプレートを今回ご紹介します。

使用方法

テンプレートファイル一式をダウンロードする

zipファイル解凍後、gulpfile.jsがあるディレクトリにターミナルで移動してGulpをインストールします。

npm install

 

エラーが出てしまった場合、以下の記事を参考にしてみて下さい。

Gulpのインストール時のエラー内容と解決策

 

インストールが終了したら、これで開発環境の構築は終了です。

作業する時は、以下コマンドでディレクトリを監視状態にして作業をします。

npm run watch

開発環境

• gulp：3.9.1
• npm：3.10.10
• テンプレートエンジン、プリプロセッサ：pug、scss

gulpfile.jsの解説

gulpfile.js

const gulp         = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS     = require('gulp-clean-css');
const csscomb      = require('gulp-csscomb');
const notify       = require('gulp-notify');
const plumber      = require('gulp-plumber');
const pug          = require('gulp-pug');
const rename       = require('gulp-rename');
const sass         = require('gulp-sass');
const sourcemaps   = require('gulp-sourcemaps');
const uglify       = require('gulp-uglify');
const del          = require('del');
const fs           = require('fs');
const runSequence  = require('run-sequence');

// config.json
const json = JSON.parse(fs.readFileSync('./config.json'));

// pug
gulp.task('pug', () => {
	return gulp.src([json.paths.src + 'pug/**/*.pug', '!' + json.paths.src + 'pug/**/_*.pug'])
	.pipe(plumber({
		errorHandler: notify.onError('<%= error.message %>')
	}))
	.pipe(pug({
		pretty: '\t',
		doctype: 'html'
	}))
	.pipe(gulp.dest(json.paths.dest));
});

// sass
gulp.task('sass', () => {
	gulp.src([json.paths.src + 'scss/**/*.scss', '!' + json.paths.src + 'scss/**/_*.scss'])
		.pipe(plumber({
			errorHandler: notify.onError('<%= error.message %>')
		}))
		.pipe(sourcemaps.init())
		.pipe(sass())
		.pipe(sourcemaps.write({
			includeContent: false
		}))
		.pipe(sourcemaps.init({
			loadMaps: true
		}))
		.pipe(autoprefixer({
			browsers: ['last 2 versions', 'iOS >= 8.1', 'Android >= 4.4'],
			cascade: false
		}))
		.pipe(csscomb())
		.pipe(gulp.dest(json.paths.dest + json.paths.assets + 'css/'))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(cleanCSS())
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(json.paths.dest + json.paths.assets + 'css/'))
});

// js
gulp.task('js', () => {
	gulp.src([json.paths.src + 'js/**/*.js'])
		.pipe(plumber({
			errorHandler: notify.onError('<%= error.message %>')
		}))
		.pipe(gulp.dest(json.paths.dest + json.paths.assets + 'js/'))
});

// img tasks
gulp.task('initialize', () => {
	return del([json.paths.dest + json.paths.assets + 'img/']);
});
gulp.task('img', () => {
	return gulp.src([json.paths.src + 'img/**/*.{png,jpg,gif,svg}'])
		.pipe(gulp.dest(json.paths.dest + json.paths.assets + 'img/'));
});
gulp.task('runSequence', (callback) => {
	return runSequence(
		'initialize',
		'img',
		callback
	);
});

// watch
gulp.task('watch', () => {
	gulp.watch(json.paths.src + 'pug/**/*.pug', ['pug'])
	gulp.watch(json.paths.src + 'scss/**/*.scss', ['sass'])
	gulp.watch(json.paths.src + 'js/**/*.js', ['js'])
	gulp.watch(json.paths.src + 'img/**/*.{png,jpg,gif,svg}', ['runSequence'])
});

設定ファイル

gulpfileで使っているパスはconfig.jsonで管理しています。

{
	"paths": {
		"src": "_src/",
		"dest": "dest/",
		"assets": "assets/"
	}
}

プラグイン一覧

インストールしているプラグインと用途は以下の通りです。

プラグイン名	解説
gulp-autoprefixer	自動でベンダープレフィックスを付与
gulp-clean-css	cssをminify化
gulp-csscomb	cssの順番等を.csscomb.jsonに則って整形する
gulp-notify	エラー時デスクトップ通知をする
gulp-plumber	watch中にエラーが出ても処理を止めないようにする
gulp-pug	pugをhtmlにコンパイル
gulp-rename	ファイル名を変更
gulp-sass	sassをcssにコンパイル
gulp-sourcemaps	ソースマップを生成
gulp-uglify	jsをminify化
del	ファイルを削除
fs	jsonファイルを読み込み
run-sequence	タスクを順番に実行させる

タスクの簡単な解説

■ pug

• ファイル名の先頭にアンダーバーが付いていないファイルのみ出力させています。
• オプションでインデントとdoctypeを指定

 

■ scss

• pugと同様、先頭にアンダーバーが付いていないファイルのみ出力させています。
• autoprefixerは最新から2バージョン前、ios8.1、Android4.4までが対象
• sourcemapsが他のプラグインとバッティングするのを避けるため、少し面長な記述になっています。
• 出力したcssをminify化させています。

 

■ js

• jsをminify化させています。

 

■ initialize & img

• 画像を追加したら、一度出力先の画像を全て削除して、その後反映させています。このようにすることで、srcディレクトリで画像を削除した場合、出力先にも反映されます。

まとめ

今回紹介したテンプレートはシングルページ向きで、多階層のサイトを作成する場合はgulpfileやpugをそれなりに編集する必要があります。

このテンプレートはあくまでも一例で、pugが使いにくいと思う方はejsに変更する等、自分なりの開発環境を作ってみてはいかがでしょうか。