Question

我在使用Gulp useref和spring mvc框架时遇到了一些问题。

我使用useref格式创建了我的jsp页面来组合和缩小资产。

JSP页面

我的gulpfile.js

var gulp = require('gulp');
var useref = require('gulp-useref');
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');

const ROOT_DIR = 'src/main/webapp';
const TEMP_DIR = './tmp';

const ROOT_DIR = 'src/main/webapp';
const TEMP_DIR = './tmp';
// replace <script> and <link> references with minified versions
gulp.task('html', function () {
    var assets = useref.assets({
       searchPath: ROOT_DIR
    });

    return gulp.src(ROOT_DIR + '/**/layout*.jsp')
        .pipe(assets)
        // concatenate and minify JS
        .pipe(gulpif('*.js', uglify({})))
        // concatenate and minify CSS
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest(TEMP_DIR));
});

gulp.task('default', ['html']);

当我运行gulp时，useref会正确替换脚本和css html引用，但不幸的是它不会创建资产的缩小版本。

我还尝试通过向useref索引文件添加日志语句来调试gulp和useref并打印 globs var：

这是来自useref索引文件

// Get relative file paths and join with search paths to send to vinyl-fs
globs = filepaths
    .filter(isRelativeUrl)
    .map(function (filepath) {
        if (opts.transformPath) {
            filepath = opts.transformPath(filepath);
        }
        if (searchPaths.length) {
            return searchPaths.map(function (searchPath) {
                return getSearchPaths(file.cwd, searchPath, filepath);
            });
        } else {
            return path.join(file.base, filepath);
        }
    });

我的控制台上的输出：

[ [ '/Users/user/Documents/projects/test/src/main/webapp/${contextPath}/includes/css/combined.css' ],
  [ '/Users/user/Documents/projects/test/src/main/webapp/${contextPath}/includes/css/typography.css' ] ]

不幸的是，$ {contextPath}不应该是资产路径的一部分。

在以前版本的gulp文件中，我使用的是gulp bundle，它运行正常：

// minify JS and CSS files
gulp.task('bundle', bundle(ROOT_DIR + '/**/layout*.jsp', {
        appDir: ROOT_DIR,
        buildDir: TEMP_DIR,
        minify: true
    })
);

我有什么遗漏或做错了吗？

Answer 1

我非常确定${contextPath}不是来自gulp-useref。它看起来像一个模板变量。我的猜测它来自你的代码。如果是这种情况，则需要在它到达useref之前插入，或者您可以使用gulp-replace从gulp任务中插入它。

Answer 2

在你的jsp文件中：

<head>
<title><fmt:message key="application.name"/> - ${title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<!-- build:css ${contextPath}/includes/css/layout_ana.min.css-->
<link rel="stylesheet" href="includes/css/combined.css" type="text/css"/>
<link rel="stylesheet" href="includes/css/typography.css" type="text/css"/>
<!-- endbuild -->

<link rel="icon" href="${contextPath}/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="${contextPath}/favicon.ico" type="image/x-icon"/>

<!--[if lte IE 7]>
<link rel="stylesheet" href="${contextPath}/includes/css/ie6and7.css" type="text/css"/>
<![endif]-->

<!--[if IE]>
<link rel="stylesheet" href="${contextPath}/includes/css/ie.css" type="text/css"/>
<![endif]-->

在你的gulp文件中：

// replace <script> and <link> references with minified versions
gulp.task('html', ['clean'], function () {
var assets = useref.assets({
    searchPath: ROOT_DIR
});

return gulp.src(ROOT_DIR + '/**/layout*.jsp')
    .pipe(assets)
    // concatenate and minify JS
    .pipe(gulpif('*.js', uglify({})))
    // concatenate and minify CSS
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(debug({title: 'USEREF ASSET:'}))
    .pipe(gulp.dest(TEMP_DIR));
});

Spring + Gulp useref

2 个答案: