使用gulp-useref无法获得gulp-rev-replace

时间:2015-09-20 10:40:59

标签: javascript gulp gulp-rev

继续我以前的question - 但这次是下一步:让文件修订工作。

我正在通过johnpapa的自动化课程与Gulp一起工作,并且似乎打到了另一面墙(当你尝试将简洁的课程改编成不同的文件结构时,这就是你得到的结果:P)。

基本上,问题在于我确实获得了以修订版命名的文件,但这些名称没有进入最终结果test.jsp,我无法弄清楚为什么......

这是任务(为简洁起见,省略了缩小,但它适用于文件修订):

gulp.task('build-dev', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.revReplace({modifyUnreved: replaceDirectory, modifyReved: replaceDirectory}))
        .pipe(gulp.dest(config.indexLocation))
        .pipe($.rev.manifest())
        .pipe(gulp.dest(config.indexLocation))
        ;
});

inject是为索引文件注入css和js引用(正常工作)的任务,$require('gulp-load-plugins')({lazy: true})config.indexFileindex.jsp

replaceDirectory函数(自rev-manifest生成完整路径名以来使用):

function replaceDirectory(path) {

    var strToReplace = '../..';
    var strToReplaceWith = process.cwd().replace(/\\/g, '/') + '/WebContent';

    if (path) {
        return path.replace(strToReplace, strToReplaceWith);
    } else {
        return path;
    }
}

我的文件结构(与课程中的文件结构不同)是:

- ModuleDir
    - dist
        - css
            - lib.css
            - app.css
        - fonts
        - images
        - js
            - lib.js
            - app.js
    - css
    - js
    - web-app
        - InnerDir
            - index.jsp
            - test.jsp
    - package.json, bower.json, etc. (all the required files)

基本上,为CSS和JS库以及应用程序资产处理index.jsp,它们被缩小并连接到lib.css,lib.js,app.css和app.js.之后所有这些都被注入到index.jsp的副本中,该副本称为test.jsp。

磁盘上的资产收集,连接,注入工作和文件修改工作非常出色。 test.jsp中文件名的更新 - 不是那么多......

任何想法或指示都将受到赞赏。

2 个答案:

答案 0 :(得分:4)

您必须在replaceInExtensions: '.jsp'的选项中添加revReplace()

在我查看插件代码并弄明白之前,我有一天半的时间遇到​​这个问题。我正在使用.php文件。文档确实说你需要这样做但很容易错过。

希望它有所帮助。

答案 1 :(得分:0)

与此同时(除非我找到问题的根源或您可以提供任何帮助),我选择了不同的缓存清除方案:

gulp.task('build-dev', ['inject'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cb = Math.random();

    return gulp
        .src(config.indexFile)
        .pipe($.rename('test.jsp'))
        .pipe($.plumber())
        .pipe(assets)
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.replace('dist/css/lib.css', 'dist/css/lib.css?cb=' + cb))
        .pipe($.replace('dist/css/app.css', 'dist/css/app.css?cb=' + cb))
        .pipe($.replace('dist/js/lib.js', 'dist/js/lib.css?cb=' + cb))
        .pipe($.replace('dist/js/app.js', 'dist/js/app.js?cb=' + cb))
        .pipe(gulp.dest(config.indexLocation))
        ;
});

这不是我想要的答案,但这是我需要的答案。 :)