Question

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

或者是否有其他方法可以解决这个问题...例如让监视任务创建index.html的不同版本，比如index.html.fooTarget;它会使用该目标的正确路径进行更新;然后，当涉及到grunt任务时，适当地复制后一个文件。

可以采取哪些措施来解决这个问题？

Answer 1

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

但如果你愿意，我认为这会帮助你修改你的咕噜声。

我假设您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"
  }
}

然后是最小的副本＆amp;替换任务在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任务

1 个答案: