Gulpの導入方法と基本的な使い方

Gulpは、フロントエンド開発においてタスクの自動化を助けるツールです。
例えば、JavaScriptやCSSの圧縮、Sassのコンパイル、ファイルの監視など、面倒な作業を自動化できます。

これにより、開発の効率が大幅に向上します。GulpはNode.js環境で動作し、シンプルで直感的なAPIを提供します。

Gulpのインストール方法

まずはGulpをインストールする手順を見ていきましょう。

Node.jsのインストール

GulpはNode.jsの環境で動作するため、まずNode.jsをインストールする必要があります。
以下の手順に従ってください

STEP

Node.jsの公式サイトにアクセスします。

あわせて読みたい

Node.js — Download Node.js® Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

STEP

最新のLTSバージョンをダウンロードしてインストールします。

Gulpのインストール

Node.jsがインストールされたら、次にGulpをインストールします。
ここでは、VSCodeの使用を想定します。

npm install --global gulp-cli

npm init -y

npm install --save-dev gulp

これで、Gulpを使用する準備ができました。

Gulpの基本的な使い方

次に、Gulpの基本的な使い方について解説します。
Gulpは、Gulpfile.jsというファイルにタスクを定義して実行します。

今回は例として、Sass（SCSS）のコンパイルとJavaScriptの圧縮を実行します。

必要なプラグインのインストール

Sass（SCSS）のコンパイルとJavaScriptの圧縮には以下のプラグインを使用します。

npm install --save-dev gulp-sass sass gulp-uglify

Gulpfile.jsの作成

プロジェクトのルートディレクトリにgulpfile.jsを作成し、以下のように記述します

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');

// SCSSのコンパイルタスク
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

// JavaScriptファイルの圧縮タスク
gulp.task('compress', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// デフォルトタスク
gulp.task('default', gulp.series('sass', 'compress'));

ディレクトリ構造の例

ディレクトリ構造を以下のように準備します。
これは例なので、適宜変えてもらって大丈夫です。

ただ、変更した際はGulpfile.jsのパスも変更する必要があるので注意してください。

my-project/
├── node_modules/
├── src/
│   ├── js/
│   │   └── script.js
│   └── scss/
│       └── style.scss
├── dist/
│   ├── css/
│   └── js/
├── gulpfile.js
├── package.json
└── package-lock.json

Gulpタスクの実行

ターミナルを開き、次のコマンドを入力してタスクを実行します。

gulp

これで、src/scssフォルダ内のSCSSファイルがコンパイルされてdist/cssフォルダに出力され、src/jsフォルダ内のJavaScriptファイルが圧縮されてdist/jsフォルダに出力されます。

Gulpを使用するメリット

Gulpを使用することで、開発プロセスを大幅に効率化できます。
以下にその主なメリットを紹介します。

まとめ

Gulpは、フロントエンド開発のタスクを自動化する強力なツールです。

この記事では、Gulpの基本的な導入方法と使い方について解説しました。
これを基に、さまざまなタスクを自動化し、開発効率を向上させてください。