Tsubasa Yeung Tsubasa Yeung - 4 months ago 53
Node.js Question

gulp-rev-collector can't rename my flash files(extension .swf)

When I used the gulp plugin gulp-rev-collector, I already have some rev-manifest files like:

"/css/rev-manifest.json", "/js/rev-manifest.json", "/swf/rev-manifest.json"
, etc.

But when I run next task

return gulp.src([revDir + '/*/.json', htmlSrc])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(htmlDist));


Only css/js/image files' url have been changed, but not swf files.
How can I achieve these ends?

This is my original code, my default task is "rev"

var gulp = require('gulp');
var clean = require('gulp-clean');
var rev = require('gulp-rev');
var revReplace = require('gulp-replace');
var replace = require('gulp-replace');
var revCollector = require('gulp-rev-collector');
var minifyHTML = require('gulp-minify-html');
var sequence = require('gulp-sequence');
var through2 = require('through2');
var useref = require('gulp-useref');

var readjson = require('readjson');


var srcDir = "igg_web_src";
var revDir = "igg_web_rev"
var distDir = "igg_web_dist";

var cssSrc = srcDir + "/v1.0/css/*.css";
var jsSrc = srcDir + "/v1.0/js/**/*.js";
var imgSrc = srcDir + "/v1.0/images/*.{jpg,jpeg,png,gif}";
var swfSrc = srcDir + "/flash/**/*.swf";
var htmlSrc = srcDir + '/view/**/*.html';

var cssDist = distDir + "/v1.0/css/";
var jsDist = distDir + "/v1.0/js/";
var imgDist = distDir + "/v1.0/images/";
var swfDist = distDir + "/flash/";
var htmlDist = distDir + '/view/';


gulp.task('clean', function()
{
return gulp.src(distDir + "/*")
.pipe(clean());
});
gulp.task('css', function () {
return gulp.src(cssSrc)
.pipe(rev())
.pipe(gulp.dest(cssDist))
.pipe( rev.manifest() )
.pipe( gulp.dest( revDir + "/css" ) );
});

gulp.task('js', function () {
return gulp.src(jsSrc)
.pipe(rev())
.pipe(gulp.dest(jsDist))
.pipe( rev.manifest() )
.pipe( gulp.dest(revDir + "/js") );
});
gulp.task('img', function () {
return gulp.src(imgSrc)
.pipe(rev())
.pipe(gulp.dest(imgDist))
.pipe( rev.manifest() )
.pipe( gulp.dest(revDir + "/img") );
});
gulp.task('swf', function () {
return gulp.src(swfSrc)
.pipe(rev())
.pipe(gulp.dest(swfDist))
.pipe( rev.manifest() )
.pipe( gulp.dest(revDir + "/swf") );
});
gulp.task('html', function () {
return gulp.src(htmlSrc)
.pipe(rev())
.pipe(gulp.dest(htmlDist))
.pipe( rev.manifest() )
.pipe( gulp.dest(revDir + "/html") );
});
gulp.task('copy', function()
{
return gulp.src(srcDir + "/**")
.pipe(gulp.dest(distDir));
});

gulp.task('rev-web', function()
{
return gulp.src([revDir + '/**', htmlSrc])
.pipe( revCollector({
replaceReved: true
}))
.pipe(gulp.dest(htmlDist));
});

gulp.task('rev', sequence('clean', 'copy', 'css','swf', 'js', 'img', 'rev-web'));

Answer

Maybe this is not the best way to solve this, but this works to me at least.

gulp.task('rev-swf', function()
{
    var stream = gs.create(distDir + '/view/**/*.html', { /* options */ });
    var swfManifest = readjson.sync(revDir + '/swf/rev-manifest.json');
    stream.on('data', function(file)
    {
        if(fs.statSync(file.path).isFile())
        {
            fs.readFile(file.path, {encoding:"utf-8"}, function(err, data)
            {
                if (!err)
                {
                    for(var key in swfManifest)
                    {
                        data = data.replace(new RegExp(key,'gm'), swfManifest[key]);
                    }
                    // var dest = file.path.replace(srcDir, distDir);
                    var dest = file.path;
                    fs.writeFile(dest, data, function(err)
                    {
                       if (err)
                       {
                            console.log(file.path + " Error", err)
                       }
                    });
                }else
                {
                    console.log(file.path + " Error", err)
                }

            });
        }

    })
});