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

i have folder structure, when create build folder using grunt, hash need prefixed .css file , name need updated in link tag in index.php.

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

after executing grunt command build folder need created following structure

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

in index.php

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

need replaced with

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

how can achieve this?

you can use either grunt-rev or grunt-filerev tasks grunt-usemin cache busting of static files in 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 in index.php, put css ref in following block

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

this rename sitename/css/main.css 8 character long hash prefix. example sitename/css/9becff3a.main.css