search

Josiah / gulp-cachebust

Generates checksums and renames references to files, useful for cachebusting
30 stars 11 forks source link

Only the first occurrence of each reference is rewritten to include the cachebuster #1

Closed cressie176 closed 10 years ago

cressie176 commented 10 years ago

Given the following HTML,

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>RepoCop - Protect the innocent, uphold the law.</title>
        <link rel="stylesheet" type="text/css" href="css/repocop-libs.css" />
        <link rel="stylesheet" type="text/css" href="css/repocop.css" />
        <link rel="icon" type="image/png" href="images/repocop.png" />        
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/repocop.png" />RepoCop</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            {{{body}}}
        </div>

        <script src="js/repocop-libs.js"></script>
        <script src="js/repocop.js"></script>
    </body>
</html>

And the following gulpfile

var fork = require('child_process').fork;
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var replace = require('gulp-replace');
var less = require('gulp-less');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var buster = require('gulp-buster');
var exclude = require('gulp-ignore').exclude;
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

var html = [
    'public/html/*.html',
    'public/html/**/*.html'    
]

var templates = [
    'public/handlebars/*.handlebars',
    'public/handlebars/**/*.handlebars'
]

var images = [
    'public/images/*.png',
    'public/images/**/*.png'
]

var fonts = [
    'bower_components/font-awesome/fonts/*',
    'bower_components/footable/css/fonts/footable.*'
]

var scripts = [
    'public/js/main.js'
];

var scriptLibs = [
    'bower_components/lodash/dist/lodash.js',
    'bower_components/jquery/dist/jquery.js',
    'bower_components/footable/js/footable.js',
    'bower_components/footable/js/footable.sort.js',
    'bower_components/footable/js/footable.paginate.js',
    'bower_components/footable/js/footable.filter.js',
    'bower_components/bootstrap/dist/js/bootstrap.js'
];

var styles = [
    'public/less/*.less'
];

var styleLibs = [
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/footable/css/footable.core.css'
];

gulp.task('fonts', function() {
    return gulp.src(fonts)
        .pipe(plumber())
        .pipe(gulp.dest('public/dist/fonts'));
});

gulp.task('scripts', function() {
    return gulp.src(scripts)
        .pipe(plumber())
        .pipe(ngmin())
        .pipe(concat('repocop.js'))
        .pipe(uglify({outSourceMap: true}))  
        .pipe(cachebust.resources())        
        .pipe(gulp.dest('public/dist/js'));
});

gulp.task('scriptLibs', function() {
    return gulp.src(scriptLibs)
        .pipe(plumber())
        .pipe(ngmin())
        .pipe(concat('repocop-libs.js'))
        .pipe(uglify({outSourceMap: true}))
        .pipe(cachebust.resources())        
        .pipe(gulp.dest('public/dist/js'));
});

gulp.task('styles', function() {
    return gulp.src(styles)
        .pipe(plumber())
        .pipe(less())
        .pipe(concat('repocop.css'))
        .pipe(cachebust.resources())                
        .pipe(gulp.dest('public/dist/css'));
});

gulp.task('styleLibs', function() {
    return gulp.src(styleLibs)
        .pipe(plumber())
        .pipe(less())
        .pipe(concat('repocop-libs.css'))
        .pipe(replace(/fonts\/footable/g, '../fonts/footable'))        
        .pipe(cachebust.resources())                   
        .pipe(gulp.dest('public/dist/css'));
});

gulp.task('images', function() {
    return gulp.src(images)
        .pipe(cachebust.resources())                           
        .pipe(gulp.dest('public/dist/images'));
});

gulp.task('html', function() {
    return gulp.src(html)
        .pipe(cachebust.references())                           
        .pipe(gulp.dest('public/dist/html'));
});

gulp.task('templates', function() {
    return gulp.src(templates)
        .pipe(cachebust.references())                           
        .pipe(gulp.dest('public/dist/handlebars'));
});

gulp.task('resources', ['fonts', 'scripts', 'scriptLibs', 'styles', 'styleLibs', 'images']);

gulp.task('default', ['server'], function() {
    gulp.watch(scripts, ['scripts', 'html', 'templates']);
    gulp.watch(scriptLibs, ['scriptLibs', 'html', 'templates']);    
    gulp.watch(styles, ['styles', 'html', 'templates']);
    gulp.watch(styleLibs, ['styleLibs', 'html', 'templates']);
    gulp.watch(fonts, ['fonts']);
    gulp.watch(images, ['images', 'html', 'templates']);
    gulp.watch(html, ['html']);    
    gulp.watch(templates, ['templates']);     
});

gulp.task('server', ['build'], function(callback) {
    fork('cluster.js');
    callback();
});

gulp.task('build', ['resources', 'html', 'templates']);

Then the images/repocop.png only gets rewritten once

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>RepoCop - Protect the innocent, uphold the law.</title>
        <link rel="stylesheet" type="text/css" href="css/repocop-libs.39d8f548.css" />
        <link rel="stylesheet" type="text/css" href="css/repocop.14df8e31.css" />
        <link rel="icon" type="image/png" href="images/repocop.07b787f5.png" />        
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/repocop.png" />RepoCop</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            {{{body}}}
        </div>

        <script src="js/repocop-libs.f5269b9d.js"></script>
        <script src="js/repocop.31d289d9.js"></script>
    </body>
</html>
Josiah commented 10 years ago

Nice catch!

This is because I've used String.prototype.replace() on line 105 of index.js, which only gets the first replaced value.

The solution is to check multiple times for new occurrences of the original file. I'll probably get to this tomorrow.

cressie176 commented 10 years ago

Don't rush on my account!

Josiah commented 10 years ago

2 is suposed to fix this, please reopen if the issue presents itself again.