Gulp4の導入からSCSSファイルをLiveReloadするまで

# 概要

### Gulp.jsとは


Gulp.jsは、開発作業を自動化する「タスクランナー」というツールの1つです。
具体的には、以下のようなことが設定可能です。
・SASSやLESSのコンパイル
・jsやcssのminify
・キャッシュファイルの削除
・画像の圧縮
・ファイルの監視
など

（公式サイトは、[こちら](https://gulpjs.com/)）


### 今回やりたいこと

今回は、Gulp.jsを使用して、自動で以下のことを行うように設定します。

- SCSSに変更があったら、CSSにコンパイル＆minifyを行う
- ブラウザをリロードしスタイルを自動反映をする


### 環境

- npm 9.6.7
- gulp 4.0.2



# gulp設定

### 1.Hello Worldする

gulpのタスクを使って「Hello World!」を出力できるようにします。
まずは、`gulp`をinstallします。


```bash
$ npm install gulp
```

`gulpfile.js`を用意し以下の記述を行います。
`default`のタスクに`Hello World!`を出力するように設定しています。

```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');

gulp.task('default', (done) => {
  console.log('Hello World!');
  done();
});
```

`default`のタスクを実行するには、`gulp`のコマンドだけで実行できます。
これで、`Hello World!`が出力されました。

```bash
$ gulp

Hello World!
```

### 2. SCSSファイルをCSSにコンパイルする


`gulp-sass`を追加でインストールします。
`gulp-sass`を使用して、SCSSファイルをCSSにコンパイルします。


```bash
$ npm install gulp sass gulp-sass
```

`gulpfile.js`は、以下の記述になります。

```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));//追加

gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss") //SCSSファイルを指定
        .pipe(sass()) //CSSにコンパイル
        .pipe(gulp.dest("./css"));//CSSフォルダに出力
});

gulp.task('default', gulp.task('sass'));//defaultタスクにsassを実行するよう指定
```


`gulp`または`gulp sass`の実行することで、
SCSSファイルをコンパイルし、CSSを出力することができます。

```bash
$ gulp
#または
$ gulp sass
```


### 3. CSSのminifyする

`gulp-clean-css`と`gulp-rename`を追加でインストールします。
`gulp-clean-css`を使用し、cssファイルminifyを行い
`gulp-rename`を使用し、`*.min.css`というファイル名に変更して出力します。

```bash
$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename
```

`gulpfile.js`は、以下の記述になります。

```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');//追加
const rename = require('gulp-rename');//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))//ファイル名の変更
        .pipe(cleanCss())//minifyの実施
        .pipe(gulp.dest("./css"));//minifyファイルの出力
});

gulp.task('default', gulp.task('sass'));
```

gulpまたはgulp sassの実行することで、
`*.css`と`*.min.css`ファイルを出力することができます。

```bash
$ gulp
#または
$ gulp sass
```



### 4. SourceMapを作成する

`gulp-sourcemaps`を追加でインストールします。
`gulp-sourcemaps`を使用することで、SourceMapを作成することができます。

SourceMapとは、コンパイル前とコンパイル後の対応関係を記したファイルです。
ブラウザ上でデバッグする際に、楽になります。

```bash
$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps
```

`gulpfile.js`は、以下の記述になります。


```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(sourcemaps.init())//初期化
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))//出力
        .pipe(gulp.dest("./css"));
});

gulp.task('default', gulp.task('sass'));
```

`gulp`または`gulp sass`の実行することで、
`*.css`と`*.min.css`ファイルに加え
`*.min.css.map`も出力されます。

```bash
$ gulp
#または
$ gulp sass
```

### 5. ファイルの更新を監視する

`gulp-watch`と`gulp-plumber`を追加でインストールします。

`gulp-watch`を使用し、ファイル更新の監視と`gulp-plumber`を使用し、エラーになったときに`watch`のタスクがエラーで停止にないように抑止します。

```bash
$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps gulp-watch gulp-plumber
```

`gulpfile.js`は、以下の記述になります。


```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");
const watch = require('gulp-watch');//追加
const plumber = require('gulp-plumber');//追加


gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(plumber())//エラーの抑止
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("./css"));
});

//scssの監視＆変更があった場合にsassのタスク実行
gulp.task('watch', () => {
    gulp.watch('sass/**/*scss', gulp.task('sass'));
});


gulp.task('default', gulp.task('watch'));//デフォルトタスクにwatchを指定
```

`gulp`または`gulp watch`の実行することで、
SCSSファイルに変更があった場合にsassタスク実行されます。

```bash
$ gulp
#または
$ gulp watch
```

これで、スタイルシートがシンタックスエラーになっても止まりません。

### 6. LiveReloadを行う

`browser-sync`を追加でインストールします
`browser-sync`を使用しでファイルが更新したらブラウザ画面のリロードを行います

```bash
# browser-syncをインストール
$ npm install gulp sass gulp-sass gulp-clean-css gulp-rename gulp-sourcemaps gulp-watch gulp-plumber browser-sync
```

`gulpfile.js`は、以下の記述になります。


```javascript:gulpfile.js
'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");
const watch = require('gulp-watch');
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create();//追加

gulp.task('sass', () => {
    return gulp.src("sass/**/*.scss")
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(rename({extname: '.min.css'}))
        .pipe(cleanCss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());//LiveReloadの実施
});

gulp.task('watch', () => {
    gulp.watch('sass/**/*scss', gulp.task('sass'));
});

//browserSyncの初期化
gulp.task('liveReload', function() {
    browserSync.init({
        proxy: "http://localhost/gulp_test",
        port: 3000,
    });
});

gulp.task('default', gulp.parallel('liveReload','watch'));//liveReloadのタスクを最初に実行
```

`gulp`を実行すると、SCSSファイルを変更しただけで自動でブラウザがリロードされるようになります。

```bash
$ gulp
```

# まとめ


Gulp4を使用したLiveReloadをできるようになるまで、段階を追って説明しました。
使用するプラグインが多かったりしますが、一度設定してしまえば色んなプロジェクトに使い回せるのでとても便利です。

参考になりましたら幸いです。
自動化ライフをエンジョイしてください！！

ここまで読んでいただきありがとうございました。