我有这样的公共资源:
public/
xyz/
index.html
js/
a.js
b.js
css/
a.css
b.css
我想使用gulp-useref
来生成html,我将index.html
更改为此:
<!-- build:css /xyz/css/index.css -->
<link href="/xyz/css/a.css" rel="stylesheet" />
<link href="/xyz/css/b.css" rel="stylesheet" />
<!-- endbuild -->
<!-- build:js /xyz/js/index.js -->
<link href="/xyz/js/a.js" rel="stylesheet" />
<link href="/xyz/js/b.js" rel="stylesheet" />
<!-- endbuild -->
我写这样的口香糖:
gulp.task("html", async function() {
gulp.src("public/xyz/*.html")
.pipe(useref())
.pipe(gulpif("*.js", uglify()))
.pipe(gulpif("*.css", cssMin()))
.pipe(gulp.dest("dist/public/xyz"))
})
第一个问题是:useref找不到absolute path: /xyz/js/a.js
。
然后我尝试将html模板更改为此:
<!-- build:css /xyz/css/index.css -->
<link href="css/a.css" rel="stylesheet" />
<link href="css/b.css" rel="stylesheet" />
<!-- endbuild -->
<!-- build:js /xyz/js/index.js -->
<link href="js/a.js" rel="stylesheet" />
<link href="js/b.js" rel="stylesheet" />
<!-- endbuild -->
运行正常,然后第二个问题,useref产生冗余的xyz
目录:
dist/
public/
xyz/
index.html
xyz/
js/
a.js
b.js
css/
a.css
b.css
答案 0 :(得分:0)
假设您希望目录输出如下所示:
dist/
xyz/
index.html
js/
a.js
b.js
css/
a.css
b.css
然后您需要执行以下操作:
public
。这是以下代码的repl.it:
const gulp = require('gulp');
const gulpIf = require('gulp-if');
const useref = require('gulp-useref');
const uglify = require('gulp-uglify');
const minifyCss = require('gulp-clean-css');
const path = require('path');
const ABS_PATH_INDICATOR = `${path.sep}${path.sep}`;
gulp.task('html', async function () {
gulp.src('public/**/*.html')
.pipe(
useref({
transformPath(assetPath) {
// an absolute path asset will have a file path
// that has two separators in the path
// e.g. <script src="/xyz/js/a.js"></script> will have
// /home/<rootpath>/<project-path>/public/xyz//xyz/js/a.js
// is this path using an absolute path as an asset?
if (assetPath.includes(ABS_PATH_INDICATOR)) {
// get the absolute path
const absPath = assetPath
.split(ABS_PATH_INDICATOR)
.pop();
// resolve the path properly
return path.resolve(path.join('public', absPath));
}
// else return the path properly
return assetPath;
},
})
)
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', minifyCss()))
.pipe(gulp.dest('dist'));
});