通过gulp合并多个css文件成一个full.min.ss文件并压缩替换模板资源路径后,页面无法加载合并后css文件。
gulp.task('styles', function () {
return gulp.src(['src/main/webapp/css/vendor/square/*.css', 'src/main/webapp/css/vendor/*.css', 'src/main/webapp/css/*.css'])
.pipe(concat('full.css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleancss())
.pipe(rev())
.pipe(gulp.dest('src/main/webapp/dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('src/main/webapp/dist/rev/css'))
.pipe(notify({message:'css处理完毕'}));
});
合并前:
<!-- build:css css/full.min.css -->
<link href="css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="css/vendor/bootstrap-select.css" rel="stylesheet">
<link href="css/vendor/bootstrap-dialog.min.css" rel="stylesheet">
<link href="css/vendor/square/blue.css" rel="stylesheet">
<link href="css/vendor/jquery.bs_pagination.min.css" rel="stylesheet">
<link href="css/vendor/animate.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/css/full-c3a75f4938.min.css">
<!-- endbuild -->
合并后:
<link rel="stylesheet" href="dist/css/full-c3a75f4938.min.css">
使用chrome浏览器打开后报错:
Failed to load resource: the server responded with full-c3a75f4938.min.css a status of 404 ()
请问是什么原因导致的呢?该如何解决?
你看下实际打包后的目录啊.