Gruntを使用してindex.html src属性値を別の値に変更する

Question

私のプロジェクトのindex.htmlファイルsrcを別のsrcに変更しようとしています。

私は今、私はこの

<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/angular/angular.min.js"></script> 

私はうなり声を使用して、これをどのように行うことができますようにそれを変換したい現在

<script src="../bower_components/jquery/dist/jquery.min.js"></script> 
<script src="../bower_components/angular/angular.min.js"></script> 

持っています？

ありがとうございました

Answer 1

@danywallsの提案は正しいです。

プラグインgrunt-processhtmlは、あなたの要件を確実に満たすことができます。

まず、あなたのpackage.jsonにそのプラグインを追加します。

$ npm install grunt-processhtml --save-dev

次のように続いて、ソースindex.htmlであなたの<script>タグの前後special commentsを追加します。

<!--build:js bower_components/jquery/dist/jquery.min.js--> 
<script src="../bower_components/jquery/dist/jquery.min.js"></script> 
<!--/build--> 

<!--build:js bower_components/angular/angular.min.js--> 
<script src="../bower_components/angular/angular.min.js"></script> 
<!--/build--> 

注：<!--build:js ... -->コメント単にあなたの中結果のindex.htmlに含めるsrcパスを指定します。

次はあなたのGruntfile.jsにこれと同様のタスクを追加します。

module.exports = function (grunt) { 

    grunt.initConfig({ 

     pkg: grunt.file.readJSON('package.json'), 

     /* Update script src attribute in .html */ 
     processhtml: { 
      updateScriptLinks: { 
       files: { 
        // NOTE: Adjust the paths below according to your project directory structure 
        './dist/index.html': ['./src/index.html'] // destination : source 
       } 
      } 
     } 

    }); 

    grunt.loadNpmTasks('grunt-processhtml'); 

    grunt.registerTask('default', [ 
     'processhtml:updateScriptLinks' 
    ]); 

};