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

我有一个文件夹结构，当我使用grunt创建构建文件夹时，需要在hash前面加上.css文件，并且需要在index.php中的link标记中更新该名称

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">

我怎样才能做到这一点

您可以将或任务与一起用于index.php中静态文件的缓存破坏

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

例如：

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

然后在

index.php

中，将

css

ref放在下面的块中

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

---

这将使用8个字符长的哈希前缀重命名

sitename/css/main.css

。例如

sitename/css/9becf3a.main.css

非常感谢您的回复！我真的很抱歉我不能及时回复。我刚试过你的代码，但没有得到预期的结果。1） 未创建“生成”文件夹。2） 它将main.css覆盖为sitename/css/9becf3a.main.css，就像它应该发生在build文件夹中一样。3） 在main.php中，它没有更新.css文件的新文件名。我对我的方法也有疑问。在我的网站上，我也使用了很多库文件。当我创建“build”时，只需要复制修改过的文件，还是需要将整个站点复制到build文件夹？如果生产服务器出现故障，如何处理恢复？如果我在构建中只复制修改过的文件，那么在产品中会有main.css文件，我如何避免这些？最好的方法是什么？1-您需要在每次部署时将所有文件

复制到构建文件夹中。在复制所有资源之前，
clean:dist
先清除目标文件夹。2-您不会从prod恢复，因为您应该在部署之前部署到模拟您的prod的测试/阶段环境。看看本例中的gruntfile。请注意构建任务和默认任务之间的差异。我已经编辑了解决方案，以包含一个复制任务，该任务将把php复制到构建中。不幸的是，我看不到你的Grunfile文件。好卢卡尔我提到的问题仍然存在。registerTask（'default'，['rev'，'usemin'）；这是我的registerTask（）函数调用。这是正确的吗？正如我在前面的评论中提到的，问题是1）“构建”文件夹未创建。2） 它将main.css覆盖为sitename/css/9becf3a.main.css，就像它应该发生在build文件夹中一样。3） 在main.php中，它没有更新.css文件的新文件名。