css/js file path update in the html file using grunt

Question

I have a folder structure, when I create the build folder using grunt, a hash need to be prefixed with .css file and that name need to be updated in the link tag in index.php.

sitename/css/main.css sitename/index.php

After executing grunt command build folder need to be created with following structure

build/sitename/css/2ed6bccd.main.css build/sitename/index.php

In the index.php

<link rel="stylesheet" href="main.css">

need to be replaced with

<link rel="stylesheet" href="2ed6bccd.main.css">

How can I achieve this?

Rachid · Accepted Answer · 2015-05-19 15:43:23Z

You can use either grunt-rev or grunt-filerev tasks together with grunt-usemin for cache busting of static files in your index.php

example:

grunt.initConfig({ config: { app: 'sitename', dist: 'build/sitename' }, clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= config.dist %>/*', '!<%= config.dist %>/.git*' ] }] } }, rev: { dist: { files: { src: [ '<%= config.dist %>/scripts/{,*/}*.js', '<%= config.dist %>/styles/{,*/}*.css' ] } } }, useminPrepare: { html: '<%= config.app %>/index.php', options: { dest: '<%= config.dist %>' } }, usemin: { html: ['<%= config.dist %>/{,*/}*.php'], css: ['<%= config.dist %>/styles/{,*/}*.css'], js: '<%= config.dist %>/scripts/*.js', options: { dirs: [ '<%= config.dist %>', '<%= config.dist %>/styles' ] } }, htmlmin: { dist: { options: { }, files: [{ expand: true, cwd: '<%= config.dist %>', src: ['*.html', 'views/*.html'], dest: '<%= config.dist %>' }] } }, copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= config.app %>', dest: '<%= config.dist %>', src: [ '{,*/}*.php', '*.{ico,png,txt}', '.htaccess', 'bower_components/**/*', 'images/{,*/}*.{gif,webp}', 'fonts/*', 'data/*' ] }, { expand: true, cwd: '.tmp/images', dest: '<%= config.dist %>/images', src: [ 'generated/*' ] }] }, styles: { expand: true, cwd: '<%= config.app %>/styles', dest: '.tmp/styles/', src: '{,*/}*.css' } }});

Your grunt build task:

grunt.registerTask('build', [ 'clean:dist', 'useminPrepare', 'concat:generated', 'cssmin:generated', //'uglify:generated', 'copy:dist', 'rev', 'usemin' ]);

And then in your index.php, put your css ref in the following block

 <!-- build:css styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild -->

This will rename sitename/css/main.css with an 8 character long hash prefix. For example sitename/css/9becff3a.main.css

Thank you very much for your reply! I'm really sorry I could not respond on time. I just tried your code but, it didn't gave me the expected result. 1) 'build' folder is not created. 2) it overwrite the main.css to sitename/css/9becff3a.main.css as it should happen in the build folder. 3) in the main.php it didn't update the new file name of .css file.
I have a question about my approach also. In my site I'm using so many library files also. When I create the 'build', only the modified files I need to copy or whole site I need to copy to the build folder? How can I handle the revert, if the something break in the production server? If I copy only modified files in the build, there will be main .css files in the production, how can I avoid these? What is the best approach for it?
1- You will need to copy all files to the build folder every time you deploy. before copying all the resources, clean:dist you destination folder. 2-you don't revert from prod, cause you should deploy to a test/stage environment that mimic you prod before you deploy. take a look at the gruntfile in this example gist.github.com/doomsbuster/7507710. Notice the diff between build tasks and the default ones.
I've edited the solution to include a copy task that will copy you php to build. Unfortunately, I can't see your gruntfile. good luck
All the issues I mentioned still exists. grunt.registerTask('default', [ 'rev', 'usemin']); this is my registerTask() function call. is this correct? as I mentioned in the previous comment the issues are 1) 'build' folder is not created. 2) it overwrite the main.css to sitename/css/9becff3a.main.css as it should happen in the build folder. 3) in the main.php it didn't update the new file name of .css file.

Collectives™ on Stack Overflow

css/js file path update in the html file using grunt

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related