Gruntを構成して、Bowerの依存関係を縮小版で置き換える方法

Question

Yeoman/Grunt/Bowerを初めて使用しています。私は、コマンドを介してインストールこれらのライブラリの非縮小さバージョンを、使用しています私のHTMLファイルに

bower.json

{ 
    "dependencies": { 
     "angular": "~1.0.7", 
     "jquery": "~1.8.0", 
     "bootstrap": "~2.3.2", 
     "angular-grid": "~2.0.5" 
    } 
} 

：私は、次の依存関係を定義するbower.jsonファイルを持っていますbower install

index.htmlを

<script src="components/jquery/jquery.js"></script> 
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script> 
<script src="components/angular/angular.js"></script> 
<script src="components/angular-grid/build/ng-grid.js"></script> 

はどうやって面倒を設定することができ、それは以下となります。これらのjsファイルの

1. コピーだけ縮小さバージョンをビルドディレクトリ
2. に、それは、例えば変更されますので、HTMLを交換してくださいjquery.js〜jquery.min.js
3. CDNを使用しない場合、すべてのファイルをカスタムアプリケーションスクリプトと組み合わせることをお勧めしますか？

ここで正しいアプローチは何ですか？私はgruntコピータスクで各libを定義する必要がありますか？同様に：

Gruntfile.js：

copy: { 
    dist: { 
    files: [{ 
     src: [ 
     'components/jquery/jquery.min.js', 
     'components/bootstrap/docs/assets/js/bootstrap.min.js', 
     'components/angular/angular.min.js', 
     'components/angular-grid/build/ng-grid.min.js' 
     ] 
    }] 
    } 
} 

が

Answer 1

使用しているJavaScriptライブラリのバージョンは、最終的にBowerモジュールには含まれません。縮小と連結は、パッケージマネージャが責任を負うものではなく、ビルドパイプラインです。

Yeomanの場合は、すべての必要な手順を実行するgrunt-useminを使用することをお勧めします。 yo webappで新しいアプリを足場にし、生成されたGruntfile.jsとindex.htmlを見てみると、これの例を見ることができます。あなたのケースでは

、あなたのスクリプトの周りにコメントを追加する必要があります含まれています

<!-- build:js scripts/main.js --> 
<script src="components/jquery/jquery.js"></script> 
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script> 
<script src="components/angular/angular.js"></script> 
<script src="components/angular-grid/build/ng-grid.js"></script> 
<!-- endbuild --> 

そして、あなたの兵卒パイプラインに対応するuseminタスクを持っていることを確認してください。

useminPrepare: { 
    options: { 
     dest: 'dist' 
    }, 
    html: 'app/index.html' 
}, 
usemin: { 
    options: { 
     dirs: ['dist'] 
    }, 
    html: ['dist/{,*/}*.html'], 
    css: ['dist/styles/{,*/}*.css'] 
}, 

Answer 2

HTMLを変更する必要はありません、grunt-contrib-uglify

uglify: { 
    libs: { 
    files: [ 
     { 
     expand: true, 
     cwd: 'components', 
     src: '**/*.js', 
     dest: 'build/components' 
     } 
    ] 
    } 
} 

を試してみて、ファイルは、1つのページをより要求された場合は、それをブラウザによってキャッシュされるため、結合された大きなファイルよりも読み込み速度が速くなります。

Answer 3

別のオプション縮小されたjavascriptの使用に興味があり、インクルードパスにパッケージバージョンがある場合は、grunt-version-copy-bower-componentsを使用してください。このgruntプラグインは、bowerコンポーネントをコピー先ディレクトリにコピーし、コンポーネントパスをコンポーネントパスに含め、参照ファイル（htmlとcss）を変更してバージョン化されたミニパスを使用するように修正します。

バージョンがコンポーネントパスに含まれることは、サイトが（CDNの背後にある）キャッシュでホストされている場合に役立ちます。これにより、バワーコンポーネントのキャッシュ時間を長く指定できます。新しいbowerコンポーネントのバージョンに切り替えると、URLは新しいものになり、キャッシュは失効したコンポーネントを提供するのではなく新しいものを取得します。

構成例：

versionCopyBowerComponents: { 
    options: { 
    exclude: ['underscore'], 
    dest: 'dist/libs', 
    filesReferencingComponents: { 
     files: ['dist/test.html', 'dist/test.css'], 
     useComponentMin: true 
    } 
    } 
} 

プラグインは、プロジェクトが使用している亭の成分を決定し、自動的にDESTで指定されたパスにそれらをインストールします。 filesReferencingComponents-> filesにリストされているファイルは、bowerコンポーネントを含む/ソースファイルです。 useComponentMinを指定すると、コンポーネントの縮小版が選択されます。

Answer 4

既にミニバージョンに存在するライブラリを自分自身で縮小するのは悪い習慣です。 幸い、少なくともangularJSの場合、bowerパッケージにはangular.min.js.mapファイルが含まれています。このソースマップでは、ソースに非圧縮ファイルをいつでも含めることは意味がないと思います。 minファイルをインクルードし、grunt minifierの外に置き、ブラウザを非縮小ソースにマップさせます。