1

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 任务时，适当地复制后一个文件。

可以做些什么来解决这个问题？

4

1 回答 1

0

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

但如果你愿意，我认为这将帮助你修改你的 grunt 任务。

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

然后，您的最小复制和替换任务可能如下所示（如果愿意，您可以单独使用grunt-contrib-copyGruntfile.js组合复制和替换）。

'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" />
于 2015-01-20T22:25:06.330 回答