修改 yeoman angular index.html 的 grunt 任务

Question

yo angular 设置了用于编写 angular 应用程序的基本脚手架。所以在index.html中我们有如下代码：

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css" />
<!-- endbower -->
<!-- endbuild -->

我正在寻找可以删除这些行并注入文件正确位置的任务。例如：

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />

或者是否有一些替代方法来处理这个...例如让 watch 任务创建不同版本的 index.html，比如 index.html.fooTarget；它会更新为该目标的正确路径；然后当涉及到 grunt 任务时，适当地复制后一个文件。

如何解决这个问题？

Answer 1

也许你应该让路径保持原样，因为 CSS 文件也是 bower 依赖项。将依赖项复制到具有相同相对路径的目录？

但如果您愿意，我认为这将帮助您修改 g运行t 任务。

我假设您的 package.json.

中（至少）有以下内容

{
  "name": "app",
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-text-replace": "0.3.11"
  }
}

那么在您的 Gruntfile.js 中，最小的复制和替换任务可能如下所示（如果愿意，您可以单独使用 grunt-contrib-copy 来组合复制和替换）。

'use strict';

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-text-replace');

    grunt.initConfig({
        src: 'src',
        dest: 'dest',
        copy: {
            dev: {
                expand: true,
                cwd: '<%= src %>',
                src: '{,*/}*.html',
                dest: '<%= dest %>/'                
            }
        },
        replace: {
            dev: {
                src: ['<%= dest %>/{,*/}*.html'],
                overwrite: true,
                replacements: [{
                    from: 'bower_components/bootstrap/dist/css',
                    to: 'css'
                }]
            }
        }
    });

    grunt.registerTask('prepare', function(val) {
        var target = val || 'dev';
        grunt.task.run([
            'copy:' + target,
            'replace:' + target
        ]);
    });
};

现在，当您运行 prepare 需要 target 的任务时，它会将所有 HTML 文件从 src 复制到 dest 目录，并且希望 CSS 替换路径，保持原始文件不变。

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 

--> will be replaced as -->

<link rel="stylesheet" href="css/bootstrap.css" />

修改 yeoman angular index.html 的 grunt 任务

grunt task to modify yeoman angular index.html

angularjs

gruntjs

yeoman

yeoman-generator-angular