gulp/minify: index.html gets cryptic extension in file name, how to take advantage?

允我心安 提交于 2019-12-11 23:35:20

问题


I am minifying an index.html file with gulp (note: took over this project, build system has been done by former dev).

It all works fine, but the gulp task generates a HTML file which has a cryptic extension to it, like:

index-bd2c7f58f0.html

I understand this must have it's advantage, but I can't grasp what...:) Because the disadvantage now is:

  • The node server needs the presence of an index.html file to allow the '/' route to work.
  • Thus so far, I either have to copy the file on every build or create a link which needs to be updated on every build

What am I missing? Should I just instruct gulp to create a plain index.html file, or what are best practices here?

Also, which of the various plugin calls is actually responsible for attaching that extension to the file name?

EDIT: Seems to be the gulp-rev and revReplace calls

Here is the gulp task I am using:

gulp.task('html', ['styles', 'scripts'], function () {
    var client = buildHTML('./client/index.html', './dist/public');        
    return merge(client);
});

function buildHTML(index, distFolder) {
    var lazypipe = require('lazypipe');
    var saveHTML = lazypipe()
        .pipe($.htmlmin, {
            removeComments: true,
            removeOptionalTags: true
        })
        .pipe(gulp.dest, distFolder);


    return gulp.src(index)
        .pipe($.useref())
        .pipe($.rev())
        .pipe($.revReplace({replaceInExtensions: ['.js', '.css', '.html', '.ejs']}))
        .pipe($.if('*.html', saveHTML()));
}

回答1:


One advantage that I'm familiar with is when it's used with assets, when you recompile the asset and create a new fingerprint for that file, the request won't return the cached response because it's a different file. As for your problem, you probably shouldn't be adding that has to your index, I think it's pretty unorthodox



来源:https://stackoverflow.com/questions/37758372/gulp-minify-index-html-gets-cryptic-extension-in-file-name-how-to-take-advanta

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!