前提
以下の環境で実行しています。
macOS Ventura
npmはインストール済み
コマンドの実行
プロジェクトのルートディレクトリで以下のコマンドを実行します。
$ npm init
実行すると、いろいろな質問をされます。
後でも変更可能なので、Enterをどんどん押すのでもOKです。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: プロジェクト名を入れます
version: (1.0.0)
description: そのままEnterでも可。説明を入れたい場合はご自由に
entry point: (index.js) そのままEnterでも可
test command: "" テストコマンドがない,不明の場合は""でOK
git repository: リモートリポジトリのURL
keywords: そのままEnterでも可。説明を入れたい場合はご自由に
author: 自分の名前とか
license: (ISC) UNLICENSEDでいいと思います。
About to write to /Users/***/package.json:
全ての質問が終わると、package.jsonが作られます。
次に、以下のコマンドを実行し、Gulp CLIをグローバルにインストールします。グローバルへのインストールは、sudoしないとパーミッションで弾かれると思います。
$ sudo npm install --global gulp-cli
以下のコマンドで、Gulpをプロジェクトにローカルにインストールします。
$ npm install --save-dev gulp
プラグインのインストール
使いたいプラグインをインストールします。今回は、sassと、webp変換をしてくれるgulp-webpをインストールします。
$ npm install gulp-dart-sass --save-dev
$ npm install --save-dev gulp-webp
Gulpfile.jsを作成する
プロジェクトのルートディレクトリに Gulpfile.js を作成して、以下のように編集します。
const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const sourcemaps = require('gulp-sourcemaps');
const webp = require('gulp-webp');
gulp.task('sass', function() {
return gulp.src('src/sass/**/*.scss') // Sassファイルのディレクトリ
.pipe(sass()) // Sassをコンパイル
.pipe(gulp.dest('dist/css')); // 出力先ディレクトリ
});
gulp.task('webp', function() {
return gulp.src('src/images/**/*.+(png|jpg|jpeg)') // 画像ファイルのディレクトリと拡張子を指定
.pipe(webp()) // 画像をWebPに変換
.pipe(gulp.dest('dist/images')); // 出力先ディレクトリを指定
});
gulp.task('default', gulp.series('sass', 'webp'));
gulp.src('src/sass/**/*.scss') で、src/sass ディレクトリ内のすべての .scss ファイルを取得して、コンパイルし、その結果を.pipe(gulp.dest('dist/css')) で、 dist/css ディレクトリに保存します。
index.jsを作る
Gulpはエントリーポイントになるindex.jsを配置する必要があります。
プロジェクトのルートディレクトリなど、package.jsonに書いたエントリーポイントにjsファイルを置きましょう。
中は空で良いです。
.gitignore
node_modulesやpackage-lock.jsonなど、gitにあげたくないファイルを書いておきましょう。
package-lock.json
node_modules
.DS_Store
タスクの実行
以下でwatchモード(監視モード)になり、ファイル変更をして保存したり指定
$ gulp watch
違うプラグインを入れたり,プラグインを削除したい時
状況にもよりますが、今回はgulp-webpを削除して、gulp-imageminを入れてみましょう。
//(上部は割愛)
"devDependencies": {
"gulp": "^4.0.2",
"gulp-dart-sass": "^1.1.0"
}
}
gulp-webpをアンインストールします。
$ sudo npm uninstall gulp-webp
gulp-imageminをインストールします。
$ npm install gulp-imagemin --save-dev
JPEG圧縮に使うimagemin-jpegoptimパッケージをインストール。
$ npm install imagemin-jpegoptim
PNG圧縮に使うimagemin-pngquantパッケージをインストール
$ npm install imagemin-pngquant
SVG圧縮に使うimagemin-svgoパッケージをインストール
$ npm install imagemin-svgo
Gulpfile.jsを編集します。
まずgulp-webpに関する部分を削除します。
具体的には、以下の部分がgulp-webpに関するブロックなので、ここを削除しましょう。
const webp = require('gulp-webp');
gulp.task('webp', function () {
return gulp.src('/images/**/*.+(png|jpg|jpeg)')
.pipe(webp())
.pipe(gulp.dest('dist/images'));
});
次に、追加したプラグインを読み込んでいる部分(Gulpfile.jsの先頭行あたり)に以下を追加します。
const imagemin = require('gulp-imagemin');
const jpegtran = require('imagemin-jpegtran');
const pngquant = require('imagemin-pngquant');
const svgo = require('gulp-imagemin').svgo;
次に、gulp-imageminのタスクを追加しましょう。imagemin-jpegoptimパッケージを使うようにします。
gulp.task('imagemin', function () {
return gulp.src(['images/**/*.+(png|jpg|jpeg)', '!images/srcImages/**/*.+(png|jpg|jpeg)'])
.pipe(imagemin([
jpegtran({// jpg/jpeg画像の圧縮に使用するプラグイン
progressive: true,
max: 70 // 0-100の範囲で品質を指定
}),
pngquant({
quality: '65-80'
}), // PNG画像の圧縮に使用するプラグイン
svgo() // svg圧縮の使用するプラグイン
]))
.pipe(gulp.dest('dist/images'));
});
最後に、これらの読み込み実行をしている最終行の部分をgulp-webpからgulp-imageminへ変更。
gulp.task('default', gulp.series('sass', 'imagemin'));
gulp.task('watch', gulp.series('sass:watch'));
すでにGulpで開発されているプロジェクトに参加する時
すでにGulpで開発されているプロジェクトの場合、package.jsonやGulpfile.jsは他の人が作ってくれているので、自分はモジュールをインストールするだけで使えます。
プロジェクトのルートディレクトリで以下のコマンドを打ちましょう。
$ npm install
これで、インストールが走るはずです。
Node.jsやnpmのバージョンが古かったりしてエラーが出ることもあるかもしれませんが、その時は適宜バージョンをあげてあげれば解決します。