grunt任务修改yeoman angular index.html

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;它会根据该目标的正确路径进行更新;然后当涉及到咕噜的任务后面的文件被适当地复制。

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

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

然后最小副本&替换任务可能看起来像你的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" />