【问题标题】:Can't get gulp-rev-replace working with gulp-useref无法让 gulp-rev-replace 与 gulp-useref 一起使用
【发布时间】:2015-12-17 03:50:53
【问题描述】:

继续我之前的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.indexFile 是 index.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)

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

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

任何想法或指点将不胜感激。

【问题讨论】:

    标签: javascript gulp gulp-rev


    【解决方案1】:

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

    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))
            ;
    });
    

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

    【讨论】:

      【解决方案2】:

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

      在查看插件代码并弄清楚之前,我遇到了这个问题一天半。我正在使用 .php 文件。文档确实说您需要这样做,但很容易错过。

      希望对你有帮助。

      【讨论】:

      • 非常感谢!稍后会检查这个,但它确实有意义 - 我确实在文档中错过了它...... :) 将坚持我的解决方案(它最终更适合我们的开发过程),但很高兴知道正确的答案!
      猜你喜欢
      • 2016-03-22
      • 1970-01-01
      • 2015-10-16
      • 1970-01-01
      • 2015-09-08
      • 2016-11-25
      • 1970-01-01
      • 1970-01-01
      • 2016-08-28
      相关资源
      最近更新 更多