3

During my Grunt tasks, add a unique string to the end of my filenames. I have tried grunt-contrib-copy and grunt-filerev. Neither have been able to do what I need them to...

Currently my LESS files are automatically compiled on 'save' in Sublime Text 3 (so this does not yet occur in my grunt tasks). Then, I open my terminal and run 'grunt', which concatenates (combines) my JS files. After this is done, then grunt should rename 'dist/css/main.css' and 'dist/js/main.js' with a "version" at the end of the filename.

I have tried:

  • grunt-contrib-copy ('clean:expired' deletes the concatenated JS before grunt-contrib-copy' can rename the file)
  • grunt-filerev ('This only worked on the CSS files for some reason, and it inserted the version number BEFORE the '.css'. Not sure why it didn't work on the JS files.')

Here's my Gruntfile.js

So, to be clear, I am not asking for "code review" I simply need to know how I can incorporate a "rename" process so that when the tasks are complete, I will have 'dist/css/main.css12345 & dist/js/main.js12345' with no 'dist/css/main.css' or 'dist/js/main.js' left in their respective directories.

Thanks in advance for any help!

UPDATE: After experimenting with this, I ended up using grunt-contrib-rename and it works great! I beleieve the same results can be achieved via grunt-contrib-copy, in fact I know it does the same thing. So either will work. As far as support for regex, not sure if both support it, so may be something else worth looking into before choosing one of these plugins :)

Improve this question

2 Answers 2

Reset to default
1

Your rename:dist looks like it should do what you want, you just need to move clean:dist to be the first task that runs (so it deletes things from the prior build rather than the current build). The order of tasks is defined by the array on this last line:

grunt.registerTask('default', ['jshint:dev', 'concat:dist', 'less:dist', 'csslint:dist', 'uglify:dist', 'cssmin:dist', 'clean:dist', 'rename:dist']);

That said, I'm not sure why you want this behavior. The more common thing to do is to insert a hash of the file into the filename before the file extension.

The difference between a hash and a timestamp is that the hash value will always be the same so long as the file contents don't change - so if you only change one file, the compiled output for just that file will be different and thus browsers only need to re-downloaded that one file while using cached versions of every other file.

The difference between putting this number before the file extension and after the extension is that a lot of tools (like your IDE) have behavior that changes based on the extension.

For this more standard goal, there are tons of ways to accomplish it but one of the more common is to combine grunt-filerev with grunt-usemin which will create properly named files and also update your HTML file(s) to reference these new file names

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is what I ended up doing after I started playing with it :) Thanks!
The reason I wanted at the end is because our site is built using a software by the name of NitroSell. They have their servers (which our site is hosted on) configured where the versioning is set as I mentioned above. I ended up running into errors with JS files not being allowed to run in Firefox due to a "MIME Type Error" (AKA Firefox does not allow .js12345 files to execute scripts because it is not a valid filetype). This is curious, because NitroSell's JS files run fine. So yes, I ultimately started inserting my version BEFORE the extension... Thanks again for your answer!
0

I'm not sure to understand completely what end you want, but if you add a var timestamp = new Date().getTime(); at the beginning of your gruntfile and concatenate to your dest param that should do the job.

dest: 'dist/js/main.min.js' + timestamp

Is it what your looking for?

Improve this answer

1 Comment

This is also what I did. I just used dest: 'dist/js/main' + date + '.js' where var date = '<%= grunt.template.today("yyyymmddHHMM") %>'

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.