gulp / minify：index.html在文件名中得到了不透明的扩展，如何利用？ [英] gulp/minify: index.html gets cryptic extension in file name, how to take advantage?

问题描述

我正在用gulp缩小一个index.html文件（注意：接管这个项目，构建系统由前dev开发）。

这一切都正常，但吞噬任务生成一个HTML文件，它有一个神秘的扩展，如：

index-bd2c7f58f0.html

我明白这一定有优势，但我可以' t掌握什么... :)因为现在的缺点是：

• 节点服务器需要存在 index.html 文件以允许'/'路径起作用。


• 因此，我要么复制每个版本的文件，要么创建一个需要在每个版本上更新的链接

我错过了什么？我应该直接指示gulp创建一个普通的 index.html 文件，或者这里有什么最佳实践？

另外，各种插件调用中的哪一个实际上负责将该扩展附加到文件名上？

编辑：似乎是gulp-rev和revReplace调用

以下是我正在使用的gulp任务：

  gulp.task（'html'，['styles'，'scripts']，function（）{
 var client = buildHTML（'./ client / index.html'，'./dist/public'） ; 
返回合并（客户端）; 
}）; 
 
函数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（）方法））; 
} 
  

解决方案

熟悉的是当它与资产一起使用时，当您重新编译资产并为该文件创建新的指纹时，请求将不会返回缓存的响应，因为它是不同的文件。至于你的问题，你可能不应该添加到你的索引，我认为这是非常规的

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()));
}

解决方案

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

这篇关于gulp / minify：index.html在文件名中得到了不透明的扩展，如何利用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！