使用 grunt 将资源替换为 CDN 路径

Question

我正在使用 yeoman 的 generator-angular-fullstack。它的 grunt 构建任务将缩小、连接和创建 revved 文件。

现在我想进一步改进它，我计划将这些修订后的文件上传到 s3 并替换我 index.html.

中的 url

完成的 html 个文件中的路径是

<script src="app/9083921.app.js"></script>

我想用

替换它们

<script src="http://cdn/9083921.app.js"></script>

我得到 grunt-aws-s3 上传文件到 s3 它正在工作。

现在可以在 index.html 文件中替换它

我尝试了 grunt-replace、grunt-text-replace、grunt-regex-replace、none 似乎对我的情况有效。我尝试将正则表达式作为 /app\/(.*)\.(js|css)/g 和 http://path/.。没用

grunt-processhtml 已包含在生成器中，有助于获取文件夹中的所有文件。像这样

所以我无法使用grunt-processhtml重写路径

是否有任何任务可以执行此操作或我做错了什么。

编辑我的 cdnify 任务

cdnify: {
      dev: {
        options: {
          base: '//cdn.com/'
        },
        files: [{
          expand: true,
          cwd: 'dist',
          src: 'public/app/index.html',
          dest: 'dist'
        }]
      }
    },

Answer 1

你试过grunt-cdnify了吗？它应该几乎涵盖了你：

Grunt plugin for rewriting static resource URLs found in your HTML and CSS.

What it does

The task looks through your specified files for URLs to rewrite, in the following places:

<img src="____">

<script src="____"></script>

<link rel="stylesheet" href="____">

background-image: url(____); in your CSS (including inside tags in your HTML)

基本任务也很简单：

cdnify: {
  someTarget: {
    options: {
      base: '//cdn.example.com/stuff/'
    },
    files: [{
      expand: true,
      cwd: 'app',
      src: '**/*.{css,html}',
      dest: 'dist'
    }]
  }
}

使用 grunt 将资源替换为 CDN 路径

Replace resources with CDN path using grunt

regex

amazon-s3

angularjs

gruntjs

What it does