gulpをpugでコンパイルすると発生する文字化けについて

前提・実現したいこと

gulpでpugをコンパイルしたいのですが日本語の文字化けが治らずに困っています。

発生している問題・エラーメッセージ

main.pug

pug
1doctype html
2html(lang='ja')
3    head
4        meta(charset='UTF-8')
5        meta(name='viewport', content='width=device-width, initial-scale=1.0')
6        link(rel='stylesheet', href='css/style.css')
7        title テストです
8        meta(name='description', content='')
9        meta(name='keywords', content='')
10    body
11        #content
12        .inner
13            p Hello Pug!
14            p テストテスト
15            strong test
16            strong こんにちは
17        script(src='js/script.js')

をコンパイルしようと　gulp pugを実行すると

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/style.css">
7    <title>�e�X�g�ł�</title>
8    <meta name="description" content="">
9    <meta name="keywords" content="">
10  </head>
11  <body>
12    <div id="content"></div>
13    <div class="inner">
14      <p>Hello Pug!</p>
15      <p>�e�X�g�e�X�g</p><strong>test</strong><strong>����ɂ���</strong>
16    </div>
17    <script src="js/script.js"></script>
18  </body>
19</html>

と文字化けが起こってしまいます。

該当のソースコード

gulpfile.js

js
1const {src, dest, watch, series, parallel } = require('gulp');
2const loadPlugins = require('gulp-load-plugins');
3// const pug = require( 'gulp-pug' );
4const $ = loadPlugins();
5const pkg = require('./package.json');
6const replace = require( 'gulp-replace' );
7const convertEncoding = require( 'gulp-convert-encoding' );
8const conf = pkg["gulp-config"];
9const sizes = conf.sizes;
10const plumber = require("gulp-plumber");
11const autoprefixer = require('autoprefixer');
12const browserSync = require('browser-sync');
13const server = browserSync.create();
14const isProd = process.env.NODE_ENV === "production";
15
16
17function icon(done) {
18    for(let size of sizes){
19        let width = size[0]
20        let height = size[1]
21        src('./favicon.png')
22        .pipe($.imageResize({
23            width,
24            height,
25            crop: true,
26            upscale: false
27        }))
28        .pipe($.imagemin())
29        .pipe($.rename(`favicon-${width}x${height}.png`))
30        .pipe(dest('./dist/image/icon'));
31    }
32    done();
33}
34
35function copyFiles(){
36    // return src('./src/index.html', './src/sample.html')
37    // return src('./src/*.html')
38    return src('./src/**/*.html')
39        .pipe(dest('./dist'));
40}
41
42function pug(){
43    // return src('./src/pug/*.pug', '!./src/pug/**/_*.pug')
44    return src('./src/pug/*.pug')
45        .pipe(plumber())
46        .pipe($.pug({
47            pretty: true
48        }))
49        .pipe(replace('Shift_JIS', 'UTF-8'))
50        .pipe(convertEncoding({to: 'UTF-8'}))
51        .pipe(dest('./dist'));
52}
53
54function styles(){
55    return src('./src/sass/*.scss', '!./src/sass/**/_*.scss')
56        .pipe($.if(!isProd, $.sourcemaps.init()))
57        .pipe(plumber())
58        .pipe($.sass())
59        .pipe($.postcss([
60            autoprefixer()
61        ]))
62        .pipe($.if(!isProd,$.sourcemaps.write('.')))
63        .pipe(dest('./dist/css'));
64}
65
66function scripts() {
67    return src('./src/js/*.js')
68        .pipe($.if(!isProd, $.sourcemaps.init()))
69        .pipe($.babel())
70        .pipe($.if(!isProd, $.sourcemaps.write('.')))
71        .pipe(dest('./dist/js'));
72}
73
74function lint() {
75    return src('./src/js/*.js')
76        .pipe($.eslint({ fix: true }))
77        .pipe($.eslint.format())
78        .pipe($.eslint.failAfterError())
79        .pipe(dest('./src/js'))
80}
81
82function startAppServer(){
83    server.init({
84        server: {
85            baseDir: './dist'
86        }
87    });
88    // watch('./src/pug/*.pug', pug);
89    // watch('./src/pug/*.pug', pug).on('change', server.reload);
90    watch('./src/**/*.scss', styles);
91    watch('./src/**/*.scss').on('change', server.reload);
92}
93
94const serve = series(parallel(styles, series(scripts)), startAppServer);
95exports.icon = icon;
96exports.styles = styles;
97exports.pug = pug;
98exports.scripts = scripts;
99exports.lint = lint;
100exports.serve = serve;
101
102
103
104exports.copyFiles = copyFiles;

試したこと

下記参考記事でgulp-convert-encodingの導入
gulp：ビルド時にcharsetやファイルエンコードをShift_JISに変換する方法

js
1function pug(){
2    // return src('./src/pug/*.pug', '!./src/pug/**/_*.pug')
3    return src('./src/pug/*.pug')
4        .pipe(plumber())
5        .pipe($.pug({
6            pretty: true
7        }))
8        .pipe(replace('Shift_JIS', 'UTF-8')) 
9        .pipe(convertEncoding({to: 'UTF-8'}))　//この部分
10        .pipe(dest('./dist'));
11}