gulpツールの活用

[KINTO Technologies Advent Calendar 2021 - Qiita](https://qiita.com/advent-calendar/2021/kinto-technologies) の7日目の記事です。

# gulpを活用してhtmlをバッチで内容変更＆圧縮しました。

## 背景
プロジェクト中に、作った大量な静的htmlファイルを、該当部分を変更、修正＆圧縮タスクがあります。
修正量があるプラス定期的に行う必要がありますので、自動化ツールを思いつきました。

### 例：

```
<!DOCTYPE html>
<html>
<head>
  <style>
    body{
        background-color:#d0e4fe;
    }
    h1{
        color:orange;
        text-align:center;
    }
    p{
        font-family:"Times New Roman";
        font-size:20px;
    }
    #help {
            float: left;
            width: 100%;
            border-radius: 10px;
            height: auto;
            min-height: 191px;
            overflow: visible;
            background-color: #f6f7f7
        }
  </style>
</head>
<body>

<h2 id="header">HTML Images</h2>
<p id="demo">HTML text demo:</p>

<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<script>
  document.getElementById("header").innerHTML = "Hello JavaScript!";
</script> 
</body>
</html>
```


### htmlでこんな風に表示されています：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2369555/3b494caf-dcbd-ffc5-07df-1cfc240658dc.png)

###　ご覧の通り、htmlの中に、**「KINTO ｇDEV」**や**「kinto.dev.com」**など、**Dev環境**で使う部分が存在しています。
リリースするときに、**DEV**を**PROD**環境へ変更共に、htmlの圧縮も行います。

###  利用環境構築

1. nodejs開発環境     (https://nodejs.rg/zh-cn/download/)
2. gulp cli環境      (https://gulpjs.com/docs/en/getting-started/quick-start/)
3. gulp-rename       (https://www.npmjs.com/package/gulp-rename)
4. gulp-replace      (https://www.npmjs.com/package/gulp-replace)
5. gulp-html-minifier(https://www.npmjs.com/package/gulp-html-minifier)
各必須項目をインストールして、gulpのソースファイルを編集しよう！

例として、テスト用のgulpソースファイルを共有します。ファイル名は**gulpfile.js**にしなければいけない。

```
// 該当するライブラリーをインポートする
var gulp = require('gulp');
var rename = require("gulp-rename");
var replace = require('gulp-replace');
var htmlmin = require('gulp-html-minifier');

// タスクを定義する
gulp.task('test', function() {
    var options = {"indentSize":2};
    var minHtmlOpts = { removeAttributeQuotes:true,  // クォート削除
                        minifyCSS:true,              // css最小化
                        minifyJS:true,               // js最小化
                        ignorePath: '/ignorePath',   // 無視するパース
                        removeComments:true,         // コメント削除
                        removeEmptyAttributes:true,  // 無効設定削除
                        collapseWhitespace:true}     // インラインタグの周囲の空白を削除
    return gulp.src('./html/*body.html')
            .pipe(htmlmin(minHtmlOpts))
            .pipe(replace(/w3schools.jpg/g,'${region}/images/w3schools.jpg'))
            .pipe(replace(/KINTO DEV/g,'${region}/KINTO PROD!!!'))
            .pipe(rename(function (path) {
                path.dirname = path.dirname.replace("_html","");
                path.extname = ".txt";
            }))
            .pipe(gulp.dest('./output/prod/'));
});
```

###  実行例
* 実行前サイズ: **819Bytes**
* 変化後サイズ: **565Bytes**   
```
<!DOCTYPE html><html><head><style>body{background-color:#d0e4fe}h1{color:orange;text-align:center}p{font-family:"Times New Roman";font-size:20px}#help{float:left;width:100%;border-radius:10px;height:auto;min-height:191px;overflow:visible;background-color:#f6f7f7}</style></head><body><h2 id=header>HTML Images</h2><p id=demo>HTML text demo:</p><p>HTML images are defined with the img tag:</p><img src=${region}/images/w3schools.jpg alt=W3Schools.com width=104 height=142><script>document.getElementById("header").innerHTML="Hello JavaScript!"</script></body></html>
```

変化したhtmlテキストは一行になりまして、元々より、読みづらいが、サイズが小さくてなって、クライアントのロードスビートが上がります。

###  gulpを使うメリット：
* pipeを利用して、バッチでファイルの処理ができる
* 既存lib活用して、色んな自動化タスクがカバーできる
* 使いやすい、学習コストが低い
*

### ここまではgulp活用して、html内容編＋ファイルを圧縮するタスクは完了しました。　　

## 終わりに
当社では、トヨタ車のサブスク「KINTO」等の企画/開発を行っており、エンジニアを募集中です。
[KINTO Technologies コーポレートサイト](https://www.kinto-technologies.com/)