文件生成但引用不对

来源:9-3 如何打包发布-2

羽惊城

2016-08-17

为什么我的新文件生成了,但是引用的css和js文件都不对啊,新生成的文件并没有被引用,而是在注释部分

57b41b9b0001708c05000061.jpg

57b41b9b0001f9eb05000064.jpg


写回答

2回答

羽惊城

提问者

2016-08-19

//引入依赖的插件
var gulp = require('gulp');
var rev = require('gulp-rev'); //给每个文件名添加版本号
var revReplace = require('gulp-rev-replace'); //更新文件的引用
var useref = require('gulp-useref'); //合并文件为新的文件
var filter = require('gulp-filter'); //过滤文件并做处理
var uglify = require('gulp-uglify'); //压缩js代码的插件
var csso = require('gulp-csso'); //压缩css的插件

gulp.task('default', function() {
	var jsFilter = filter('**/*.js', {
		restore: true
	});
	var cssFilter = filter('**/*.css', {
		restore: true
	});
	var indexHtmlFilter = filter(['**/*', '!**/index.html'], {
		restore: true
	});

	return gulp.src('src/index.html')
		//	先做合并处理
		.pipe(useref())
		//	提取js文件并做处理然后返回
		.pipe(jsFilter)
		.pipe(uglify())
		.pipe(jsFilter.restore)
		//	提取css文件并做处理然后返回
		.pipe(cssFilter)
		.pipe(csso())
		.pipe(cssFilter.restore)
		//	提取html文件并做处理然后返回
		.pipe(indexHtmlFilter)
		//	生成哈希版本号文件名
		.pipe(rev())
		.pipe(indexHtmlFilter.restore)
		//	更新文件的引用---修改文件名后的版本号
		.pipe(revReplace())
		//	存放到dist文件夹中
		.pipe(gulp.dest('dist'));
})


0
0

羽惊城

提问者

2016-08-19

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>理财网站</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="Shortcut Icon" href="/favicon.ico">
		<!-- build:css css/combined.css -->
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="js/vendor/owl.carousel.2.1.0/assets/owl.carousel.css" />
		<link rel="stylesheet" type="text/css" href="js/vendor/owl.carousel.2.1.0/assets/owl.theme.default.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!-- endbuild -->
	</head>

	<body>
		<!--[if lte IE 8]>
			<p>lt(小于)/gt(大于)/lte(小于等于)/gte(大于等于)</p>
			<p class="browserupgrade">您的浏览器版本过低,请到<a href="http://browsehappy.com/">这里</a>更新,以获取最新体验</p>
		<![endif]-->
		<header>
			<nav class="top">
				<span class="tel">理财热线:400-888-8888</span>
				<ul>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">快速注册</a>
					</li>
					<li>
						<a href="#">关于</a>
					</li>
					<li>
						<a href="#">帮助</a>
					</li>
					<li>
						<a href="#">app下载</a>
					</li>
					</li>
				</ul>
			</nav>
			<nav class="main">
				<a href="#" class="brand"><img src="img/logo@1x.png" alt="回到首页" /></a>
				<ul>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">理财频道</a>
					</li>
					<li>
						<a href="#">投资频道</a>
					</li>
					<li>
						<a href="#">新手专区</a>
					</li>
					<li>
						<a href="#">安全保障</a>
					</li>
				</ul>
			</nav>
		</header>
		<div class="container">
			<div class="transaction clearfix">
				<div class="trans-content">
					<div class="trans-data">
						<span>平台累计成交金额</span>
						<span class="trans-money">19888</span>
						<span>万元</span>
					</div>
					<div class="trans-data">
						<span>过去7日成交金额</span>
						<span class="trans-money">1888</span>
						<span>万元</span>
					</div>
					<div class="trans-report">
						<a href="#">查看平台运营报告</a>
					</div>
				</div>
			</div>
			<div class="ad">
				<div class="owl-carousel owl-theme">
					<div class="item">
						<picture>
							<source srcset="img/ad001-l.png" media="(min-width:50rem)" >
							<source srcset="img/ad001-m.png" media="(min-width:30rem)" >
							<img src="img/ad001.png" alt="2015年度报告"/>
						</picture>
					</div>
					<div class="item">
						<picture>
							<source srcset="img/ad002-l.png" media="(min-width:50rem)" >
							<source srcset="img/ad002-m.png" media="(min-width:30rem)" >
							<img src="img/ad002.png" alt="新年红包"/>
						</picture>
					</div>
					<div class="item">
						<picture>
							<source srcset="img/ad003-l.png" media="(min-width:50rem)" >
							<source srcset="img/ad003-m.png" media="(min-width:30rem)" >
							<img src="img/ad003.png" alt="新手秘籍"/>
						</picture>
					</div>
				</div>
			</div>
			<section class="feature">
				<div class="item">
					<h3>安全</h3>
					<p>国家AAA信用平台<br />银行资金托管<br />上市公司北京保证</p>
				</div>
				<div class="item">
					<h3>安全</h3>
					<p>中央电视台推荐<br />互联网百强企业<br />标准起草单位</p>
				</div>
				<div class="item">
					<h3>安全</h3>
					<p>100元起投<br />用户利益保障机制<br />保险公司承保</p>
				</div>
			</section>
			<div class="notice clearfix">
				<a href="#"><span>2015-12-31</span>元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告元旦期间业务受理及值班公告</a>
				<a href="#" class="more">更多公告</a>
			</div>
			<section class="product clearfix">
				<h2>
					固定期限产品
					<em>甄选优质基金</em>
					<em>省时省力</em>
					<em>坐等收益</em>
				</h2>
				<div class="product-content">
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
				</div>
			</section>
			<div class="product clearfix">
				<h2>
					固定期限产品
					<em>甄选优质基金</em>
					<em>省时省力</em>
					<em>坐等收益</em>
				</h2>
				<div class="product-content">
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
					<div class="item clearfix">
						<h3><em>3</em>个月</h3>
						<div class="info">
							<p>约定年化收益<span class="year-rate">3.5%<i>起</i></span></p>
							<p>总成交金额<span class="money">1880<i>万元</i></span></p>
						</div>
						<div class="buy">
							<a href="#">购买</a>
						</div>
					</div>
				</div>
			</div>
			<nav class="footer">
				<div class="footer-content clearfix">
					<p class="brand"></p>
					<ul>
						<li class="title">关于我们</li>
						<li>
							<a href="#">公司介绍</a>
						</li>
						<li>
							<a href="#">业务模式</a>
						</li>
						<li>
							<a href="#">合作机构</a>
						</li>
						<li>
							<a href="#">服务协议</a>
						</li>
					</ul>
					<ul>
						<li class="title">风险防范</li>
						<li>
							<a href="#">账户安全</a>
						</li>
						<li>
							<a href="#">安全保障</a>
						</li>
					</ul>
					<ul>
						<li class="title">理财产品</li>
						<li>
							<a href="#">固定期限</a>
						</li>
						<li>
							<a href="#">债权/散标</a>
						</li>
					</ul>
					<ul>
						<li class="title">交易帮助</li>
						<li>
							<a href="#">购买</a>
						</li>
						<li>
							<a href="#">赎回</a>
						</li>
						<li>
							<a href="#">提现</a>
						</li>
					</ul>
					<ul>
						<li class="title">机构服务</li>
						<li>
							<a href="#">机构中心</a>
						</li>
						<li>
							<a href="#">合作联系</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>
		<footer>
			<ul>
				<li><span class="icon icon-zfywxk">支付业务许可证</span></li>
				<li><span class="icon icon-pcirk">PCI认证</span></li>
				<li><span class="icon icon-visayz">Visa验证</span></li>
				<li><span class="icon icon-vsjmfw">VerSign加密</span></li>
				<li><span class="icon icon-wlgs">网络工商</span></li>
				<li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
				<li><span class="icon icon-gs">北京工商</span></li>
			</ul>
			<p>北京某互联网金融公司 版权所有 © 2015-2016</p>
		</footer>
		<!-- build:js js/combined.js -->
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
		<script src="js/vendor/owl.carousel.2.1.0/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vendor/picturefill.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- endbuild -->
	</body>

</html>


0
1
姜维
我用你的文件生成的没有问题,所以不太清楚具体原因,你把gulp那几个插件重新再安装一下试试?
2016-08-22
共1条回复

姜维

2016-08-18

你把你 index.html 和 gulpfile 贴出来看看?

0
0

响应式开发一招致胜

用一套代码开发出不受设备型号、尺寸限制的互联网金融网站

4021 学习 · 752 问题

查看课程