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