gulpのインストール方法

ウェブ開発を効率化するためのタスクランナーとして人気の高いGulp。今回は、そのインストール方法をわかりやすく解説します。Node.jsとnpmのインストールから、Gulpの基本的な使い方まで、ステップバイステップでご紹介します。

前提条件の確認 Node.jsとnpmのインストール

まず、Gulpをインストールする前に必要なNode.jsとnpmがインストールされているか確認しましょう。以下のコマンドをターミナルまたはコマンドプロンプトで実行して、バージョンを確認します。

node -v
npm -v

バージョンが表示されれば問題ありません。インストールされていない場合は、Node.jsの公式サイトからインストールしてください。

Gulp CLIのインストール

Gulpのコマンドラインインターフェース（CLI）をグローバルにインストールします。これにより、どのプロジェクトでもGulpコマンドを使用できるようになります。

npm install --global gulp-cli

プロジェクトのセットアップ

プロジェクトディレクトリの作成

次に、Gulpを使用したいプロジェクトのディレクトリを作成し、そのディレクトリに移動します。

mkdir my-gulp-project
cd my-gulp-project

パッケージの初期化

プロジェクトのpackage.jsonファイルを作成します。

npm init -y

Gulpのインストール

プロジェクトのローカルにGulpをインストールします。

npm install --save-dev gulp

Gulpfileの作成と設定

Gulpfileの作成

プロジェクトのルートディレクトリにgulpfile.jsを作成します。このファイルにタスクの定義を記述します。

touch gulpfile.js

Gulpタスクの定義

例えば、以下のようにgulpfile.jsにシンプルなタスクを定義します。

const gulp = require('gulp');

gulp.task('hello', (done) => {
  console.log('Hello, Gulp!');
  done();
});

Gulpタスクの実行

ターミナルで以下のコマンドを実行して、定義したタスクを実行します。

gulp hello

これで、Gulpが正しくインストールされ、基本的なタスクを実行できるようになりました。

Sassをコンパイルする方法

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

まず、GulpでSassをコンパイルするために必要なプラグインをインストールします。

npm install --save-dev gulp-sass sass

gulp-sassはGulpのSassプラグインで、sassはDart Sassを使用するためのパッケージです。

Gulpfileの設定

次に、gulpfile.jsを編集して、Sassのコンパイルタスクを追加します。

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

// Sassのコンパイルタスク
gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss') // ソースとなるSassファイルの指定
    .pipe(sourcemaps.init()) // ソースマップの初期化
    .pipe(sass().on('error', sass.logError)) // Sassのコンパイルとエラーハンドリング
    .pipe(sourcemaps.write('./maps')) // ソースマップの出力
    .pipe(gulp.dest('./dist/css')); // コンパイル後のCSSの出力先
});

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

プロジェクトのディレクトリ構成は以下のようになります。

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

src/scss/フォルダにSassファイルを置き、コンパイル後のCSSファイルはdist/css/フォルダに出力されます。

Sassファイルの準備

次に、src/scss/ディレクトリにSassファイルを作成します。例えば、style.scssを作成し、以下のように記述します。

$primary-color: #333;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}

Gulpタスクの実行

ターミナルで以下のコマンドを実行して、Sassをコンパイルします。

gulp sass

または、デフォルトタスクとして設定している場合は、単に

gulp

を実行することで、Sassのコンパイルが実行されます。