标签: gulp-rev

所以我在gulp中创建了这个任务:

'use strict';
var gulp = require('gulp');
var gulpGlobals = require('./_gulp-globals.js');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');


gulp.task('gulp-rev', function () {
    var sources = gulpGlobals.src + '/somefolder/**/*.js';
    var fileToInject = gulpGlobals.destination + '/somefolder/script.js';

    var outputFolderJs = 'webapp/dist/somefolder';

    return gulp.src(fileToInject)
        .pipe(rev())
        .pipe(revReplace())
        .pipe(gulp.dest(outputFolderJs));
});

并创建了另外一个名为this的文件,例如: script-7c58e79612.js

但是,如何将其包含在我的html文件中而不是script.js？所以前面的例子而不是我的这一行file.html:

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script.js</script>

我可以这样:

<script type="text/javascript" src="{{ STATIC_URL}}/somefolder/script-7c58e79612.js</script>

我将 Gulp 任务设置为同时连接、缩小和指纹资产，将它们直接写入我的资产文件夹：

（CSS部分）

gulp.task('styles:cssmin', function(){
    return gulp.src('src/css/*.css')
        .pipe(concat('main.css')) // combine them
        .pipe(cssmin()) // minify them
        .pipe(rev()) // Pipe through gulp-rev to fingerprint generated file
        .pipe(gulp.dest('assets/css'))  // write rev'd assets 
        .pipe(rev.manifest({
            merge: true // Merge because this happens for .js and images too
        }))
        .pipe(gulp.dest('./')); // write manifest
});

这会对文件进行指纹识别并生成清单，但我无法将任何路径保存到清单文件中。这是它生成的清单：

{
  "bg.jpg": "bg-447ac2238b.jpg",
  "logo.png": "logo-e31e139d4d.png",
  "main-min.js": "main-min-cc3a682299.js",
  "main.css": "main-ea0d06582f.css",
  "main.js": "main-35ec0bb3c8.js"
}

我希望将其设置为：

{
  "assets/img/bg.jpg": "assets/img/bg-447ac2238b.jpg",
  "assets/img/logo.png": "assets/img/logo-e31e139d4d.png",
  "assets/js/main-min.js": "assets/js/main-min-cc3a682299.js",
  "assets/css/main.css": "assets/css/main-ea0d06582f.css",
  "assets/jsg/main.js": "assets/js/main-35ec0bb3c8.js"
}

特别是考虑到文档给出了一个包含相对路径的示例