Gulp初心者チュートリアル｜今更ながら、Gulpが使ってみたい。

# 前提
以下の環境で実行しています。

macOS Ventura
npmはインストール済み

# コマンドの実行
プロジェクトのルートディレクトリで以下のコマンドを実行します。

```
$ npm init
```

実行すると、いろいろな質問をされます。
後でも変更可能なので、Enterをどんどん押すのでもOKです。

```terminal
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 を作成して、以下のように編集します。

```javascript
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を入れてみましょう。


```package.json
//(上部は割愛)
  "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に関するブロックなので、ここを削除しましょう。

```Gulpfile.js
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の先頭行あたり)に以下を追加します。

```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パッケージを使うようにします。

```Gulpfile.js
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へ変更。

```Gulpfile.js
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のバージョンが古かったりしてエラーが出ることもあるかもしれませんが、その時は適宜バージョンをあげてあげれば解決します。