![NEXMAG[ネクスマグ] パソコン工房](/magazine/assets/images/common/logo.svg){kind=logo}
gulp（ガルプ）はNode.jsのパッケージ（プラグイン）として開発されているWeb開発を効率的に行うためのツールです。様々な処理や作業を自動化することができ、実際の開発現場でも使われています。
今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順についてご紹介します。
※本記事は、gulp3をベースに進めます。（現在の最新版であるgulp4は、設定ファイルの記載が変更されているので動作しない可能性があります。）
gulpのメリット
gulpを使うと、ファイルを圧縮してファイルサイズを軽くしたり、サーバーにアップロードをする作業を自動化したりすることで開発を効率的に行うことができます。
gulp似ているツールは他にもありますが、gulpは処理速度が早く、併用して使えるNode.jsのパッケージが豊富なことから、多くの人に使われています。
※今回の記事は下記の記事で紹介した環境とNode.jsのバージョンで検証しています。
“Electronでクロスプラットフォームのデスクトップアプリを作る”
https://www.pc-koubou.jp/magazine/23739
gulpをインストールする
gulpを始めるためにはインストールをする必要があるので、最初にマシンにgulpをインストールします。
インストールには、ローカルインストールとグローバルインストールの２種類のインストールのやり方がありますが、今回はグローバルインストールを行います。
グローバルインストールとローカルインストールについては、下記の記事で説明をしていますので参考にしてください。
“Electronでクロスプラットフォームのデスクトップアプリを作る”
https://www.pc-koubou.jp/magazine/23739
まずコマンドプロンプトを開いて下記のコマンドを実行してください。
npm install –g [email protected]
インストールをすることができたら、gulpが正常にインストールできているか、下記のコマンドを実行して確認してください。
gulp -v
上図と同じ表記が出ることを確認したら、次に進みます。
インストールが完了したら、gulpを実際に使ってみます。
事前に今回作業するフォルダーを作成しておきます。
新しく作った作業フォルダーの「gulp1」の中に「gulpfile.js」ファイルを作成します。
gulpfile.jsに下記のソースコードを貼り付けます。
// パッケージを読み込む
let gulp = require('gulp');
// タスク「hoge」を設定する
gulp.task('hoge', function()
{
// タスク「hoge」の内容
console.log('Hello from hoge');
});
// デフォルトタスクを設定する
gulp.task('default', function()
{
// デフォルトタスクの内容
console.log('Hello from default');
});
さきほど作成した「gulpfile.js」ファイルは、実行したいJavaScriptのコードを「タスク」として記載して設定します。
ちなみにWeb開発の現場で行う作業のことを「タスク」と呼びファイルが保存するときや、何かアクションをしたときに任意のタイミングでタスクを実行することができます。
では、上記のソースコードで設定したタスクを実際に動かしてみます。
コマンドプロンプトに戻って、下記のコマンドを実行してください。
gulp
実行画面に「Heelo from default」が表示されたら、タスクが実行できたことを示しています。
defaultで指定したタスクがデフォルトタスクとして実行されます。
次に下記のコマンドを実行して違うタスクも実行してみます。
gulp hoge
「Hello from hoge」が表示されたら、上のソースコードで設定した「hoge」というタスクが実行されました。
gulpでは、「gulp (タスク名)」とコマンドを実行することで、指定したタスク名を実行することができます。
ファイルを監視して更新するたびにタスクを実行する
gulpにはファイルの更新をトリガーにしてタスクを実行することができるパッケージがあるので、そのパッケージをインストールします。
コマンドプロンプトで下記のコマンドを実行してください。
npm install -g gulp-watch
作業フォルダー「gulp2」の中に、先ほどと同様に「gulpfile.js」と「index.html」と「style.css」を新しく作成します。
「gulpfile.js」に下記のソースコードを貼り付けてください。
let gulp = require('gulp');
let watch = require('gulp-watch');
gulp.task('watch', function()
{
watch(['./index.html', './style.css'], function()
{
console.log('Helllo from watch');
});
});
gulp.task('test', function()
{
console.log('hello from test');
});
gulp.task('default', function()
{
console.log('herllo from default');
});
次に「index.html」ファイルを作成して、下記のソースコードを書き込んでください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello gulp</h1>
</body>
</html>
「style.css」の中には特になにも記述する必要はないですが、ファイルは用意しておきます。
上記のファイルを用意することができたら、コマンド上で作業用ディレクトリーである「gulp2」フォルダーに移動して下記のコマンドを実行してください。
gulp watch
実行している状態で、コマンドプロンプト画面は閉じないで「index.html」もしくは「style.css」ファイルに移動して、ソースコードを変更して保存すると、「Hello from watch」が表示されます。
ファイルの更新を監視するために「watch」というタスクを設定したので、「gulp watch」コマンドでファイル監視を開始しています。この状態で、ファイルの更新をすると更新があるたびに「Hello from watch」が表示されると思います。
CSS関係の処理を自動化する
CSSファイルはプロジェクトによっては膨大なソースコードの量になるので、サーバーにアップロードする前にWebページの読み込みを高速化するために、CSSファイル内の改行やスペースを削除して、 CSS のファイルサイズを軽量化する作業をします。
このときファイルサイズを軽量化することを「圧縮する」と言い、圧縮したファイルには「.min」を、ファイル名に入れるのが一般的です。
ここで新しく作られたファイルを「minify(ミニファイ)」ファイルと呼ばれています。
今回は、CSS周りで便利なgulpパッケージを使って、実際のプロジェクトで使うことを想定した自動化を説明していきます。
新しくパッケージをインストールする必要があるので、コマンドプロンプト画面に移り、下記のコマンドを一行ずつ実行してください。
npm install -g gulp-cssmin npm install -g gulp-rename npm install -g gulp-sourcemaps
※最後にインストールした「gulp-sourcemaps」は似たような「gulp-sourcemap」というプラグインが別にあるので注意してインストールしてください。
上記のコマンドでインストールすることができたら、作業ディレクトリーの中の「gulp3」の中に「gulpfile.js」と「index.html」ファイルと「style.css」ファイルを作成します。
※「index.html」と「style.css」については、「gulp2」の中に作成したファイルを複製して使います。
作成したら、下記のソースコードを貼り付けてファイルを保存してください。
「gulpfile.js」
let gulp = require('gulp');
let watch = require('gulp-watch');
let cssmin = require('gulp-cssmin');
let rename = require('gulp-rename');
let sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function()
{
gulp.src('./style.css')
.pipe(sourcemaps.init())
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function()
{
watch(['./index.html', './style.css'], function()
{
gulp.start(['css']);
});
});
// タスク「test」を設定する
gulp.task('test', function()
{
// タスク「test」の内容
console.log('Hello from test');
});
// デフォルトタスクを設定する
gulp.task('default', function()
{
// デフォルトタスクの内容
console.log('Hello from default');
});
「gulpfile.js」ファイルを保存したら、コマンド上で作業用ディレクトリー「gulp3」フォルダーに移動して下記のコマンドを実行してください。
gulp watch
コマンドプロンプトは閉じずに、「gulp3」フォルダーの中の「style.css」を変更して保存すると、「gulp3」フォルダーの中に新しく圧縮された「style.min.css」が書き出されました。
上記のソースコードで.pipe（）と記載している部分がありますが、この書き方することによって複数の処理をつなげて書くことができます。新しい処理を追加したい場合は.pipe()を増やすだけです。
上記のソースコードは、cssファイルの圧縮とminifyファイルの作成と、最終的に出力されるファイルの名前の変更を自動で行う処理を記載しています。
実際の業務でよく行われるこのような処理も、自分で毎回行うのは大変ですが、gulpなら自動的に実行してくれるので効率的です。
サーバーにアップロードする作業を自動化する
Webサイト開発では、サーバにアップロードする作業がありますが、いちいちファイルを保存してFTPソフトで、サーバに接続してファイルをアップロードするのは毎回大変な作業量になります。
ですが、この作業もgulpと新しくインストールするパッケージを活用することで、自動的に設定することができます。
では、早速サーバアップロードするためのパッケージをインストールします。
下記のコマンドを実行してください。
npm install -g gulp-sftp
インストールすることができたら、作業ディレクトリーの中の「gulp4」の中に「gulpfile.js」と「index.html」ファイルと「style.css」ファイルを作成します。
※「index.html」と「style.css」については、「gulp2」の中に作成したファイルを複製して使います。
ファイルを作成したら、「gulpfile.js」に下記のソースコードを貼り付けて保存してください。
// パッケージを読み込む
let gulp = require('gulp');
let watch = require('gulp-watch');
let cssmin = require('gulp-cssmin');
let rename = require('gulp-rename');
let sourcemaps = require('gulp-sourcemaps');
let sftp = require('gulp-sftp');
// タスク「css」を設定する
gulp.task('css', function()
{
gulp.src('./style.css') // 操作するファイルを指定する
.pipe(sourcemaps.init()) // ソースマップ（圧縮前の行番号）を保存する
.pipe(cssmin()) // css圧縮処理を行う
.pipe(sourcemaps.write()) // ソースマップを書き出す
.pipe(rename({suffix: '.min'})) // ファイル末尾に「.min」を追加する
.pipe(gulp.dest('./')); // 操作後のファイル保存場所を指定する
gulp.start(['upload']);
});
// タスク「upload」を設定する
gulp.task('upload', function()
{
gulp.src(['index.html', 'style.min.css']) // アップロードするファイルを指定する
.pipe(sftp({
host: 'xxx.xxx.xxx.xxx', // サーバのホスト名
port: ' xx ', // サーバのポート番号
user: 'xxx', // サーバのユーザ名
pass: 'xxx', // サーバのパスワード
remotePath: '/var/www/html/xxx' // アップロード先の場所
}));
console.log(“server upload complete”);
});
// タスク「watch」を設定する
gulp.task('watch', function()
{
// HTMLファイルとCSSファイルの変更時に、コードを実行する
watch(['./index.html', './style.css'], function()
{
gulp.start(['css']);
});
});
// タスク「test」を設定する
gulp.task('test', function()
{
// タスク「test」の内容
console.log('Hello from test');
});
// デフォルトタスクを設定する
gulp.task('default', function()
{
// デフォルトタスクの内容
console.log('Hello from default');
});
設定した「upload」タスクの中のサーバ情報はそれぞれ利用しているサーバ情報に合わせて設定してください。
「gulpfile.js」ファイルを保存したら、コマンド上で作業用ディレクトリー「gulp4」フォルダーに移動して下記のコマンドを実行してください。
gulp watch
コマンドプロンプトは閉じずに、「gulp4」ディレクトリーの中の「style.css」を変更して保存してください。
コマンドプロンプトの画面に「server upload complete」と表示されると、アップロードが完了したことを示します。
これでファイルを保存した際に、毎回自動的にサーバへファイルがアップロードされるようになりました。
セキュリティ面を考慮したサーバアップ方法
例えばGitHubなどを使ってオープンソースで開発を進める場合、「gulpfile.js」も共有することになります。今のやり方だと「gulpfile.js」にそのままサーバ情報を記載しているため、セキュリティ上問題があります。
これを防ぐために、別のファイルにサーバの情報を記載し、「gulpfile.js」はそのサーバ情報が記載されているファイルを読み込むことで、「gulpfile.js」を共有しても、外部にサーバの情報が流出することを防げます。
作業の中の「gulp5」の中に「gulpfile.js」ファイル、「index.html」ファイル、「style.css」ファイル、「server.json」ファイルを新しく作成します。
※「index.html」と「style.css」については、「gulp2」の中に作成したファイルを複製して使います。
作成したら、下記のソースコードを貼り付けてファイルを保存してください。
「gulpfile.js」
// パッケージを読み込む
let gulp = require('gulp');
let watch = require('gulp-watch');
let cssmin = require('gulp-cssmin');
let rename = require('gulp-rename');
let sourcemaps = require('gulp-sourcemaps');
let sftp = require('gulp-sftp');
var fs = require('fs');
// タスク「css」を設定する
gulp.task('css', function()
{
gulp.src('./style.css') // 操作するファイルを指定する
.pipe(sourcemaps.init()) // ソースマップ（圧縮前の行番号）を保存する
.pipe(cssmin()) // css圧縮処理を行う
.pipe(sourcemaps.write()) // ソースマップを書き出す
.pipe(rename({suffix: '.min'})) // ファイル末尾に「.min」を追加する
.pipe(gulp.dest('./')); // 操作後のファイル保存場所を指定する
gulp.start(['upload']);
});
// タスク「upload」を設定する
gulp.task('upload', function()
{
const config = JSON.parse(fs.readFileSync('server.json', 'utf8'));
gulp.src(['index.html', 'style.min.css']) // アップロードするファイルを指定する
.pipe(sftp({
host: config['host'], // サーバのホスト名
port: config['port'], // サーバのポート番号
user: config['user'], // サーバのユーザ名
pass: config['pass'], // サーバのパスワード
remotePath: '/var/www/html/xxx' // アップロード先の場所
}));
console.log(“server upload complete”);
});
// タスク「watch」を設定する
gulp.task('watch', function()
{
// HTMLファイルとCSSファイルの変更時に、コードを実行する
watch(['./index.html', './style.css'], function()
{
gulp.start(['css']);
});
});
// タスク「test」を設定する
gulp.task('test', function()
{
// タスク「test」の内容
console.log('Hello from test');
});
// デフォルトタスクを設定する
gulp.task('default', function()
{
// デフォルトタスクの内容
console.log('Hello from default');
});
次に「server.json」ファイルに、サーバの情報を設定するので、下記のフォーマットにしたがってサーバ情報を記載します。
「server.json」
{
"host": “サーバのホスト名”,
"port": サーバのポート番号,
"user": “サーバユーバー名”,
"pass": “サーバのパスワード”
}
設定した「server.json」ファイルには、それぞれ利用しているサーバ情報に合わせて設定してください。
「gulpfile.js」ファイルを保存したら、コマンド上で「gulp5」フォルダに移動して下記のコマンドを実行してください。
gulp watch
コマンドプロンプトは閉じずに、「gulp5」ディレクトリーの中の「style.css」を変更して保存します。
コマンドプロンプトの画面に「server upload complete」という表示が出るとアップロードが完了したことを示します。
サーバを扱う時は上記のようにセキュリティの面も意識して開発するようにしましょう。
gulpを使えばWeb開発を効率化できる
今回は、gulpの環境構築からgulpのプラグインを使ってWeb開発で必要となる作業を効率化する手順をご紹介しました。
この他にもgulpは様々な使い方があるので、プロジェクトや開発環境によって時間がかかるような作業に適用できそうなものがあれば、ぜひgulpを活用して効率化しましょう。
石郷祐介
大学卒業後、公設研究機関勤務を経て、「情報科学芸術大学院大学[IAMAS]」に入学。
専門学校講師を経て、企業の研究開発をコンセプトから開発まで支援する「合同会社4D Pocket」代表、エンジニアを養成するフリースクール「一般社団法人HOPTER TECH SCHOOL」代表理事、「名古屋文理大学」及び「名古屋造形大学」非常勤講師。
