質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

受付中

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

zerocool0602
zerocool0602

総合スコア0

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1回答

0グッド

0クリップ

1213閲覧

投稿2021/04/11 02:38

前提・実現したいこと

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}

補足情報(FW/ツールのバージョンなど)

package.jsonなどはgithubを参考にしていただければと思います。

github

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

元のPugファイルがShift-jisになっているようです。UTF-8で編集すると良いと思います。

プロジェクトの設定ファイルとして.editorconfigを設定することをお勧めします。vscodeの場合は.editorconfigを有効にさせるプラグインをインストールする必要があります。

投稿2021/06/09 14:58

runnynose

総合スコア497

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。