Gulp.jsでテンプレート開発を高速化！

2018年12月21日 Web

Gulpでテーマ開発を効率化！

WordPressなどのテーマ開発を行う際には、HTMLやCSSでのコーディング、画像の追加・圧縮など多くの作業が必要となります。

しかし、何度も手動で圧縮やコンパイルなどを行うとすると、同じ様な作業は、自動で実行出来てしまった方が便利ですよね？

日々の作業を効率化することが出来る、Gulpの使い方について見ていきましょう。

Gulpとは？

Node.jsをベースとした、フロントエンドでの開発を支援するためのツールです。別名「タスクランナー」と呼ばれます。

Gulpの特徴は、並列処理による実行で処理速度が速い事やプラグインが多いことです。画像やCSSの圧縮、Sassのビルドなどをスクリプトで記載します。

Gulpで出来ること

Gulpでは、以下のような作業を自動化出来ます。

HTML、CSS、Javascriptの圧縮
Sassのビルド
画像の圧縮
ベンダープレフィックスの自動付与
ファイルが変更されたら自動リロード

Gulpを利用するための準備

Bootstrapを利用し、CSSフレームワークを利用したテーマ開発に挑戦します。

Node.jsのインストール

Gulp.jsを利用するには、Node.jsの最新版のインストールパッケージをダウンロードし、インストールします。

※Node.jsとは
サーバーサイドで動作するJavaScriptのこと。

インストール完了の画面が表示されれば、次はGulpのインストールに進みます。

Gulpのインストール

Gulpは公式サイトにあるコマンドをターミナルアプリで順番に打つことでインストールします。


 $npm install gulp-cli -g
 $npm install gulp -D
 $npx -p touch nodetouch gulpfile.js
 $gulp --help

※「Error: EACCES: permission denied, access '/usr/local/lib/node_modules'」エラーについて

Gulpをインストールしたところ、「$npm install gulp-cli -g」のタイミングで、「Error: EACCES: permission denied, access '/usr/local/lib/node_modules'」というエラーが発生しました。

この場合、「npmのディレクトリの権限」を変更することで解決出来ます。

npmでpermission deniedになった時の対処法[mac] - Qiita

Bootstrapのダウンロード

Download · Bootstrap

Bootstrapの場合、「Source files」内にある「Download Source」ボタンをクリックし、ファイルをダウンロードします。

Gulpを使ってみよう！

今回は、3つのテーマを元に使い方について紹介します。

事前準備

index.html（Bootstrap）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Gulp Test</title>
</head>
<body>
<p>Gulpを利用してみる</p>
</body>
</html>

ｓtyle.scss（Bootstrap）

@import "scss/bootstrap";

Sassのビルドを行い、CSSを圧縮する

「style.scss」を配置。

必要なプラグイン

$ npm install gulp-clean-css --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-cleanCSS --save-dev

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');

gulp.task('default', gulp.series(compile_sass, minify_css),
  function(done) {
    console.log('default');
    done();
  }
);

function compile_sass(done) {
	return gulp.src("style.scss")
 	   .pipe(sass())
 	   .pipe(gulp.dest("src"));
 	   done();
}

function minify_css(done) {
	 return gulp.src('src/*.css')
		.pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('src'));
		done();
}

HTML、CSS、JavaScriptを同時に圧縮する

「index.html」を配置。
「css/style.css」を配置。
「js/main.js」を配置。
「http://localhost:3000/」などでサイトが開きます。ターミナルにURLなどが記載されます。

必要なプラグイン

$ npm install gulp-htmlmin --save-dev
$ npm install gulp-clean-css --save-dev
$ npm install gulp-uglify --save-dev

gulpfile.js

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');

gulp.task('default', gulp.series(
  gulp.parallel(minify_html, minify_css, minify_javascript),
  function(done) {
    console.log('default');
    done();
}));

function minify_html(done) {
  return gulp.src('*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./'));
    done();
}

function minify_css(done) {
	 return gulp.src('css/*.css')
		.pipe(cleanCSS({compatibility: 'ie8'}))
		.pipe(gulp.dest('css'));
		done();
}

function minify_javascript(done) {
	return gulp.src('js/*.js')
		.pipe(uglify())
        .pipe(gulp.dest('js'));
        done();
}

CSSの変更を監視して、ブラウザを自動でリロードする

「index.html」を配置。
「style.scss」を配置。
「http://localhost:3000/」でサイトが開きます。

必要なプラグイン

$ npm install node-sass gulp-sass --save-dev
$ npm install node-sass browser-sync --save-dev

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('default', gulp.series(watch),
  function(done) {
    console.log('default');
    done();
});

function compile_sass(done) {
	return gulp.src("style.scss")
 	   .pipe(sass())
 	   .pipe(gulp.dest("css"));
 	   done();
}

function watch() {
    browserSync.init({
        server: "./"
    });

    gulp.watch('style.scss', gulp.series(compile_sass)).on('change', browserSync.reload);
    gulp.watch('*.html').on('change', browserSync.reload);
};

これで効率よく作業出来ますね！

如何でしょうか。Gulpを利用することで、日々の繰り返し作業を効率よく進めていくことが出来ます。特に画像の圧縮などは自動で出来てしまえば忘れることないですし、便利ですね！

自動化することでミスや作業時間の削減などが可能になりますので、是非試してみて下さい。