web-dev-qa-db-ja.com

Bowerの依存関係を縮小バージョンで置き換えるようにGruntを構成する方法

ヨーマン/グラント/ボワーは初めてです。次の依存関係を定義するbower.jsonファイルがあります。

bower.json

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

私のhtmlファイルでは、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>

どうすればうなり声を設定できますか？

  1. それらのjsファイルの縮小バージョンのみをビルドディレクトリにコピーします
  2. 変更するようにHTMLを置き換えます。 jquery.jsからjquery.min.js
  3. CDNを使用しない場合-すべてのファイルをカスタムアプリケーションスクリプトと組み合わせることをお勧めしますか？

ここで正しいアプローチは何ですか？単調なコピータスクで各ライブラリを定義する必要がありますか？お気に入り：

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'
      ]
    }]
  }
}
angularjsgruntjsyeomanbower
30
fischermatte

使用している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 -->

そして、Gruntパイプラインに対応するuseminタスクがあることを確認してください：

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

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

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

また、ファイルが1ページ以上要求された場合、ブラウザによってキャッシュされ、結合された大きなファイルよりも高速にロードされます。

2
yao tony

縮小されたjavascriptを使用し、インクルードパスにパッケージバージョンを含めることに関心がある場合は、 grunt-version-copy-bower-components を使用することもできます。このうなり声プラグインは、bowerコンポーネントの宛先ディレクトリへのコピーを処理し、コンポーネントパスにコンポーネントバージョンを含め、バージョン管理された縮小パスを使用するように参照ファイル（htmlおよびcss）を変更します。

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

設定例：

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

プラグインは、プロジェクトが使用しているBowerコンポーネントを判別し、destで指定されたパスに自動的にインストールします。 filesReferencingComponents-> filesにリストされているファイルは、bowerコンポーネントをインクルード/ソースするファイルです。 useComponentMinを指定すると、コンポーネントの縮小バージョンが選択されます。

0
HypeXR

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

0
Romain F.