使用gulp检查根目录中所有html文件中的空链接或空白链接
Ale*_*nik 8 html javascript gulp
我的项目根目录中有很多HTML文档.我们来看一个简单的骨架HTML文档,如下所示:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<a href="#">hello</a>
<a href="">hello</a>
<a href="#">hello</a>
<a href="">hello</a>
<a href="#">hello</a>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
在我将所有这些文件发送给开发团队之前,我被分配了一个任务,即检查没有没有href的链接,空的href,或者有一个空片段作为href.也就是说,
基本上,没有像这样的喜欢:
<a href="">
要么
<a href="#">
要么
<a>
我找到了这个gulp插件,但我有一些问题.我们先来看一下gulp文件:
gulp.task("checkDev", function(callback) {
var options = {
pageUrls: [
'http://localhost:8080/Gulp-Test/index.html'
],
checkLinks: true,
summary: true
};
checkPages(console, options, callback);
});
请注意,当您传递选项时checkLinks: true,它不仅适用于a标记,还适用于此页面上提到的所有标记.如果<a>标签为空或只有#或根本不存在,插件没有问题.
看看我运行gulp任务时会发生什么:
所以我想要的是,如果只能a检查链接,并且<a>标签没有href或空值或只是#,那么它应该抛出错误或在摘要报告中显示它.
最后,在gulp文件的示例中看到我如何传递pageUrl(即基本上要检查的页面),如下所示:
pageUrls: [
'http://localhost:8080/Gulp-Test/index.html'
],
如何告诉此插件检查目录中的所有.html文件Gulp-Test？
所以总结一下我的问题:当它看到<a>没有a href或者href为空白或者值为#时,如何让这个插件抛出错误(即在摘要报告中显示)以及如何告诉这个插件检查目录中的所有.html文件.
我的任务是检查是否存在没有 href 和空 href 或有空片段作为 href 的链接。
如果这就是您所需要的，那么您实际上不需要任何 gulp 插件。无论如何，您能否找到适合您特定要求的东西还是值得怀疑的。
不过，您自己也可以轻松完成此任务。您真正需要做的就是：
- 读入您想要使用 进行验证的所有 HTML 文件
gulp.src()。 - 使用 . 将每个文件通过管道传输到您自己的函数
through2。 - 使用您喜欢的任何 HTML 解析器解析每个文件（例如
cheerio）。 - 找到解析后的 HTML DOM 中的坏链接。
- 使用记录不良链接，
gutil.log()以便您知道如何修复。 - 也许抛出一个，
gutil.PluginError所以你的构建失败（这是可选的）。
这是一个 Gulpfile ，它正是这样做的（参考评论中的上述几点）：
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());
});
和这样的gulp checkLinks人一起跑步......Gulp-Test/index.html
<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
| 归档时间： |
|
| 查看次数： |
539 次 |
| 最近记录： |