Hello,

I'm having some issues regarding static asset caching for combined css and javascript.

I cannot figure out how I should force my web server (Nginx in this case) to locally cache the file from http://myserver/combine/da28ece239482ff67096ed4b7868fd50-1454688342.css. I can't use a location directive because the location doesn't exist.

Naturally, if I wasn't combining the assets then I'd have no issues as the files would exist in the theme directory as is the case with images etc, but not so here. Any ideas what I should be doing short of not combinging them at all and allowing mod_pagespeed to combine them later.

Cheers, Rob

Hi Can you explain a bit more? Why is this not the answer?

I have same issue. When I access a CSS/JS file, the Cache-Control header is private, must-revalidate. How can I make it public with a TTL?

I am not sure if this is the best practice but I wrote a gulp script to combine an minimize all JS an CSS files. Then in nginx I prepared rewrites as follows. Hope it helps.

nginx

location ~* ^/themes/code200/assets/(css|js)/(.*)\.(\d+)\.(css|js)$ {
        expires max;
        try_files $uri /themes/code200/assets/$1/$2.$4 index.php;
        }

gulp

// Include gulp
var gulp = require('gulp');
var Vinyl = require('vinyl');
var Vinyl = require('gulp-insert');

// Include Our Plugins
var jshint = require('gulp-jshint');
// var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var remoteSrc = require('gulp-remote-src');
var insert = require('gulp-insert');
var rename = require("gulp-rename");
var gutil = require('gulp-util');

const jsFolderPath = 'themes/code200/assets/js/';
const tmpFolder = 'storage/temp/public/gulp/';

var buildVersion = getNewBuildVersion();
gutil.log("New build version is: " + buildVersion);

function getNewBuildVersion () {
    var date = new Date();
    return date.getFullYear() +""+ date.getMonth()+1 +""+ date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds();
}

// Lint Task
gulp.task('lint-all', function() {
    return gulp.src(jsFolderPath + '*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('lint', function() {
    // const jsHintConfig = jshint.jshintConfig;
    // jsHintConfig.strict = "implied";

        return gulp.src(jsFolderPath + 'custom.js')
        .pipe(jshint({strict: "true", globals: {
            "jQuery": false,
            "document": false,
            "window": false,
            "setTimeout": false
        }}))
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
// gulp.task('sass', function() {
//     return gulp.src('scss/*.scss')
//         .pipe(sass())
//         .pipe(gulp.dest('dist/css'));
// });

// Concatenate & Minify JS
gulp.task('scripts', function() {

    /** fetch remote script - gmaps and store it in temp folder so we can include it in our main js **/
    var googleMapsJsFilename = "maps.google.api.js";
    var googleMapsJsFilePath = tmpFolder + googleMapsJsFilename;
    remoteSrc(['js?sensor=true'], {
        base: 'http://maps.google.com/maps/api/'
    })
        .pipe(rename( googleMapsJsFilename ))
        .pipe(gulp.dest(tmpFolder));

    gulp.src([
        jsFolderPath + 'jquery.js',
        jsFolderPath + 'bootstrap.js',
        jsFolderPath + 'owl.carousel.js',
        // jsFolderPath + 'jquery.sliderPro.js',
        jsFolderPath + 'superfish.js',
        jsFolderPath + 'hover.intent.js',
        jsFolderPath + 'superclick.js',
        jsFolderPath + 'masonry.pkgd.js',
        // jsFolderPath + 'imagesloaded.pkgd.js',
        // jsFolderPath + 'pongstagr.am.js',
        jsFolderPath + 'jquery.collapse.js',
        jsFolderPath + 'jquery.matchHeight.js',
        // jsFolderPath + 'jflickrfeed.js',
        // googleMapsJsFilePath,
        // jsFolderPath + 'gmaps.js',
        // jsFolderPath + 'jquery.prettyPhoto.js',
        // jsFolderPath + 'jquery.fitvids.js',
        jsFolderPath + 'jquery.placeholder.js',
        jsFolderPath + 'custom.js',
        ])
        .pipe(concat('code200.'+buildVersion+'.js'))
        // .pipe(gulp.dest('dist'))
        .pipe(rename('code200.'+buildVersion+'.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(jsFolderPath));

});

// // Watch Files For Changes
// gulp.task('watch', function() {
//     gulp.watch('js/*.js', ['lint', 'scripts']);
//     gulp.watch('scss/*.scss', ['sass']);
// });

//@todo write build version somewhere

// Default Task
gulp.task('default',
    [
        'lint',
        // 'sass',
        // 'scripts',
        // 'watch'
]);