CSS version numbers with Grunt - css

Question

I am using Grunt with php and am using a package to version my css with a date stamp as style.min.20160913230349.css.
However how do I find a package that will update the new string to the header in my php page. style.min.{grunt_this_string}.css.
I'm looking a usemin but can't see how I could implement it.
<link rel="stylesheet" media="all" href="/css/style.min.20160913230349.css" type="text/css"/>
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
/*=============================================
= Proxy server =
=============================================*/
php: {
dist: {
options: {
hostname: 'sau.dev',
base: 'website-v2', // Project root
keepalive: false,
open: false
}
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'website-v2/*.php',
'website-v2/*/*.php',
'website-v2/css/*.css'
]
},
options: {
proxy: 'sau.dev',//<%= php.dist.options.hostname %>:<%= php.dist.options.port %>
ghostMode: {
clicks: false,
forms: false,
scroll: true
},
logLevel: 'info',//client
logConnections: true,
watchTask: true,
open: 'ui',
xip: true,
}
}
},
watch: {
html: {
files: ['src/*.html'],
}
},
cssmin: {
dist: {
files: {
'website-v2/css/style.min.css': ['website-v2/css/all.css']
}
}
},
uglify: {
dist: {
files: {
'website-v2/js/main.min.js': ['website-v2/js/jquery- 1.9.1.min.js','jquery-ui.min.js','main.js','featherlight.js']
}
}
},
assets_versioning: {
options: {
tag: 'date',
dateFormat: 'YYYYMMDDHH',
timezoneOffset: 10
},
dist: {
options: {
tasks: ['cssmin:dist']
}
},
},
});
//grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-assets-versioning');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-string-replace');
//grunt.loadNpmTasks('usemin');
//Static Server
grunt.registerTask('dist', ['versioning']);
//Proxy Server
grunt.registerTask('server', ['php:dist','browserSync','watch']);
};

Answer 1

After understand your problem, I think that you need to create a assets.map
You need to add this in gruntfile.js.
options: {
...
versionsMapFile: 'assets.json',
...
}
I would like to believe that grunt-assets-versioning create a version taken the date.
You need to replace in your html with the version that provide assest.json.
I recommend to use grunt-string-replace for this.
replace: {
dist: {
options: {
patterns: [
{
match: 'style.min.css',
replacement: replacement()
}
]
},
files: [
{src: ['src/assets/index.html'], dest: 'build/index.html'}
]
}
}
...
grunt.registerTask('versioning', ['assets_versioning']);
grunt.registerTask('replace', ['string-replace']
...
function replacements() {
var projectFile = "assets.json";
if (!grunt.file.exists(projectFile)) {
grunt.log.error("file " + projectFile + " not found");
return true;//return false to abort the execution
}
var project = grunt.file.readJSON(projectFile);//get file as json object
var version = project[0].version;
var replace = ''
// continue with the algorithm that you need
return replace;
}
I hope that helps.