Javascript 使用gulp检查根目录中所有html文件中的空链接或空白链接
我的项目根目录中有很多HTML文档。让我们来看看一个简单的骨架HTML文档，比如：：Javascript 使用gulp检查根目录中所有html文件中的空链接或空白链接,javascript,html,gulp,Javascript,Html,Gulp,我的项目根目录中有很多HTML文档。让我们来看看一个简单的骨架HTML文档，比如：： 现在，在我将所有这些文件发送给开发团队之前，我的任务是检查是否存在没有href、空href或有空片段作为href的链接。即 基本上，不可能有这样的人： <a href=""> <a href="#"> 请注意，当您传递选项checkLinks:true时，它不仅适用于a标记，还适用于所有提到的标记。如果 因此，我想要的是，如果只能检查a链接，并且标记没有href或空值，或者只有一
<a href="">
<a href="#">
checkLinks:truea
因此，我想要的是，如果只能检查a
链接，并且
标记没有href或空值，或者只有一个#，那么它应该抛出一个错误或在摘要报告中显示它
最后，在gulp文件的示例中，可以看到我是如何传递pageUrl（即基本上要检查的页面）的，如下所示：
我该如何告诉这个插件检查gulptest
目录中的所有.html
文件
因此，总结一下我的问题：当这个插件看到一个
而没有href
或一个href为空或值为#时，我如何让它抛出一个错误（即显示在摘要报告中），以及我如何告诉这个插件检查目录中的所有.html文件
我的任务是检查是否有没有链接没有href、href为空或href为空片段
如果这就是您所需要的，那么您实际上不需要任何吞咽插件。无论如何，你是否能找到符合你具体要求的东西是值得怀疑的
然而，你可以很容易地自己完成这项任务。你真正需要做的就是：
读入所有要使用验证的HTML文件
使用管道将每个文件传输到您自己的函数
使用您喜欢的任何HTML解析器解析每个文件（例如）
在已解析的HTML DOM中查找错误链接
使用日志记录坏链接，以便知道如何修复
可能会抛出一个错误，使构建失败（这是可选的）
这里有一个Gulpfile，它正好做到了这一点（在注释中引用上述要点）：
使用gulptest/index.html
运行gulpchecklinks
，就像这样
<html>
<head><title>Test</title></head>
<body>
<a>no href</a>
<a href="">empty href</a>
<a href="#">empty fragment</a>
<a href="#hash">non-empty fragment</a>
<a href="link.html">link</a>
</body>
</html>
试验
。。。结果如下：
[20:01:08] Using gulpfile ~/example/gulpfile.js
[20:01:08] Starting 'checkLinks'...
[20:01:08] Finished 'checkLinks' after 21 ms
[20:01:08] Gulp-Test/index.html: <a>no href</a>
[20:01:08] Gulp-Test/index.html: <a href="">empty href</a>
[20:01:08] Gulp-Test/index.html: <a href="#">empty fragment</a>
/home/sven/example/gulpfile.js:22
throw new gutil.PluginError( 'checkLinks',
^
Error: 3 bad links in Gulp-Test/index.html
[20:01:08]使用gulpfile~/example/gulpfile.js
[20:01:08]正在启动“检查链接”。。。
[20:01:08]21毫秒后完成“检查链接”
[20:01:08]吞咽试验/index.html：
[20:01:08]吞咽试验/index.html：
/home/sven/example/gulpfile.js:22
抛出新的gutil.PluginError（'checkLinks'，
^
错误：Gulp Test/index.html中有3个坏链接
var gulp=require（'gulp'）；
var jsdom=require（'jsdom'）.jsdom；
var fs=需要（'fs'）；
var colors=需要（“颜色”）；
colors.setTheme({
错误：“红色”，
档案：“蓝色”，
信息：“绿色”，
警告：“黄色”
});
gulp.task（'checkLinks'，function（））{
fs.readdir（'.'，函数（错误，文件）{
如果（错误）
犯错误；
var htmlFiles=files.filter（函数（c，i，a）{
返回c.substring（c.lastIndexOf（'.'）+1）==“html”；
});
forEach（函数（c，i，a）{
fs.readFile（c，函数（fileReadErr，数据）{
if（fileReadErr）
抛出FileReader；
var doc=jsdom（数据）；
var window=doc.defaultView；
var$=require（'jquery'）（窗口）；
var aTags=$（'a'）.toArray（）；
var k=0；
console.log（（“\n\n*********************************************正在检查文件”+c+“****************************************”.info）；
for（var i=0；i看起来像是您在上次编辑中自己找到了答案。请检查此选项。我建议您自己回答并接受该答案，这样其他人就可以轻松找到它（也可以让您得到他们的甜点：））.@Ness距离我想要达到的目标还有很长的一段路要走，我已经重新表述了我的问题。@Ness谢谢你的提示，但是使用noEmptyFragments:true，
only将失败..但是，将通过。我建议下载一份副本并开始编码。@MikeMcCaughan还没有那么专业！；）…否则我一开始就不会问这个问题了哈哈
pageUrls: [
'http://localhost:8080/Gulp-Test/index.html'
],
var gulp = require('gulp');
var through = require('through2').obj;
var cheerio = require('cheerio');
var gutil = require('gulp-util');
var path = require('path');
var checkLinks = function() {
return through(function(file, enc, cb) { // [2]
var badLinks = [];
var $ = cheerio.load(file.contents.toString()); // [3]
$('a').each(function() {
var $a = $(this);
if (!$a.attr('href') || $a.attr('href') == '#') { // [4]
badLinks.push($.html($a));
}
});
if (badLinks.length > 0) {
var filePath = path.relative(file.cwd, file.path);
badLinks.forEach(function(badLink) {
gutil.log(gutil.colors.red(filePath + ': ' + badLink)); // [5]
});
throw new gutil.PluginError( 'checkLinks',
badLinks.length + ' bad links in ' + filePath); // [6]
}
cb();
});
}
gulp.task('checkLinks', function() {
gulp.src('Gulp-Test/**/*.html') // [1]
.pipe(checkLinks());
});
<html>
<head><title>Test</title></head>
<body>
<a>no href</a>
<a href="">empty href</a>
<a href="#">empty fragment</a>
<a href="#hash">non-empty fragment</a>
<a href="link.html">link</a>
</body>
</html>
[20:01:08] Using gulpfile ~/example/gulpfile.js
[20:01:08] Starting 'checkLinks'...
[20:01:08] Finished 'checkLinks' after 21 ms
[20:01:08] Gulp-Test/index.html: <a>no href</a>
[20:01:08] Gulp-Test/index.html: <a href="">empty href</a>
[20:01:08] Gulp-Test/index.html: <a href="#">empty fragment</a>
/home/sven/example/gulpfile.js:22
throw new gutil.PluginError( 'checkLinks',
^
Error: 3 bad links in Gulp-Test/index.html
var gulp = require('gulp');
var jsdom= require('jsdom').jsdom;
var fs=require('fs');
var colors= require('colors');
colors.setTheme({
error:"red",
file:"blue",
info:"green",
warn:"yellow"
});
gulp.task('checkLinks',function() {
fs.readdir('.',function(err, files){
if(err)
throw err;
var htmlFiles=files.filter(function(c,i,a){
return c.substring(c.lastIndexOf('.')+1)==="html";
});
htmlFiles.forEach(function(c,i,a){
fs.readFile(c,function(fileReadErr,data){
if(fileReadErr)
throw fileReadErr;
var doc= jsdom(data);
var window= doc.defaultView;
var $=require('jquery')(window);
var aTags=$('a').toArray();
var k=0;
console.log(("\n\n************************Checking File "+c+"***************************").info);
for(var i=0; i<aTags.length; i++){
if(!(aTags[i].hasAttribute("href")) || aTags[i].getAttribute("href")==="" || aTags[i].getAttribute("href")==="#" ) {
k++;
console.log("BAD LINK ".error+aTags[i].outerHTML.info+" IN FILE "+c.file);
}
}
console.log(("BAD-LINKS COUNT IN " +c+" is "+k).bgRed.white);
window.close();
});
});
});
});