Encoding problems with gulp on Windows

Asked 23/4, 2015 at 17:33 Answered 23/11, 2022 at 15:18

Solved windows visual-studio web character-encoding gulp

I have several source files in a Visual Studio 2013 wep application project that I process using gulp version 3.8.11. Those files are Unicode (UTF-8 with signature) - Codepage 65001 encoded text files. After process them, they appear as they were Windows 1252 encoded text files.

For example, given the following UTF-8 encoded src/hello.html file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello</title>
</head>
<body>
    <h1>Hello, my name is Jesús López</h1>
</body>
</html>

This is how it looks on the browser:

enter image description here

Using the following gulpfile.js:

var gulp = require('gulp');

gulp.task('build', function () {
    gulp.src('src/hello.html')
        .pipe(gulp.dest('dist'));
});

After executing gulp build on the command line, this is how it looks on the browser:

enter image description here

How can I solve this encoding problem? Please help.

Gawain answered 23/4, 2015 at 17:33 Comment(4)

This is very interesting. I've looked through gulp source code and it doesn't seem possible with gulp 3 to pass in an encoding option to gulp.src. You will probably have some luck with some plugin. A quick google search will return many results. I am thinking you should raise this issue with the gulp developers. – Libertinage 23/4, 2015 at 19:27

what is your gulp version? – Hiss 23/4, 2015 at 20:52

@Lim H. I I tried with gulp-convert-encoding with no luck. I raised an issue on gitub github.com/gulpjs/gulp/issues/1037. – Pearse 24/4, 2015 at 5:6

@Felipe Skinner, version is 3.8.11 – Pearse 24/4, 2015 at 5:12

I had the same problem with .cshtml files, I found out that it was because of a missing UTF-8 BOM. That can easily be added with a gulp-plugin called gulp-header.

var gulp = require('gulp');
var header = require('gulp-header');

gulp.task('build', function () {
    gulp.src('src/hello.html')
        .pipe(header('\ufeff'));
        .pipe(gulp.dest('dist'));
});

Footprint answered 23/6, 2015 at 13:55 Comment(1)

Thanks for the answer. Kinda ridiculous we had to do it manually though - I'd expect dest() to have a parameter for encoding. Would love to understand the rationale behind the current behavior. – Sippet 30/7, 2015 at 22:13

I had similar problem i solved it by adding

var convertEncoding = require('gulp-convert-encoding');

    gulp.task("copy:templates", function () {
        return gulp
            .src("./app/**/*.html")
            .pipe(convertEncoding({ from: "windows1250", to: "utf8" }))
            //.pipe(header('\ufeff'))
            .pipe(gulp.dest("./wwwroot/app"));
    });

    gulp.task('build:ts', function () {

        return gulp.src("./app/**/*.ts")
            .pipe(sourcemaps.init())
            .pipe(typescript(tsconfigBuildTs))
            .pipe(sourcemaps.write())
            .pipe(convertEncoding({ from: "windows1250", to: "utf8" }))
            .pipe(gulp.dest("./wwwroot/app/"));
    });

The most important line is

.pipe(convertEncoding({ from: "windows1250", to: "utf8" }))

You should check your file encodings for from in the file > advanced save. Mine was set to windows1250 yours might be different.

Kearney answered 19/6, 2016 at 14:36 Comment(0)

Thanks a lot for the previus answer, I do this in my proyect and it run well, but at least in my case I need to put before the other instructions.

This works fine

gulp.src(['**/*.html'])
    .pipe(convertEncoding({ from: "windows1250", to: "utf8" }))
    .pipe(replace(/\n\s*\n/g,'\n'))
    .pipe(gulp.dest('./DIST/'));

This doesn't work fine

gulp.src(['**/*.html'])
    .pipe(replace(/\n\s*\n/g,'\n'))
    .pipe(convertEncoding({ from: "windows1250", to: "utf8" }))
    .pipe(gulp.dest('./DIST/'));

Tennietenniel answered 23/11, 2022 at 15:18 Comment(0)

Recommended topics

Hot tags