css/js 使用 grunt 在 html 文件中更新文件路径

Question

我有一个文件夹结构，当我使用 grunt 创建构建文件夹时，散列需要以 .css 文件为前缀，并且需要在 link 标记中更新该名称index.php.

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

执行 grunt 命令后，需要使用以下结构创建文件夹

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

在index.php

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

需要替换为

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

我怎样才能做到这一点？

Answer 1

您可以使用 grunt-rev or grunt-filerev tasks together with grunt-usemin 来清除 index.php

中静态文件的缓存

示例：

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'
  }
}});

您的 grunt 构建任务：

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

然后在你的 index.php 中，将你的 css ref 放在下面的块中

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

这将使用 8 个字符长的散列前缀重命名 sitename/css/main.css。例如sitename/css/9becff3a.main.css

css/js 使用 grunt 在 html 文件中更新文件路径

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

gruntjs