あなたが勝った5つのグラントタスク＆＃x27; Tは見逃したいです！

5つの必須グラントタスクでフロントエンドワークフローを合理化する

人気のあるタスクランナーである

Gruntは、繰り返しのフロントエンド開発タスクを大幅に簡素化します。この記事では、効率とコードの品質を高める5つの強力なグラントプラグインを強調しています。 Gulpのような他のタスクランナーは存在しますが（詳細については「gulp.jsの紹介」を参照）、Gruntの広範なプラグインエコシステムは貴重な資産のままです。 グラントは初めてですか？ 「Gruntで繰り返しのタスクを自動化する」または公式のGrunt Getting Guideをご覧ください。

キーテイクアウト：

• ：CSSでベンダーのプレフィックスを自動化し、ブラウザの互換性のためにプレフィックスを追加する退屈な手動プロセスを排除します。 grunt-autoprefixer
：
• 未使用のCSSを削除して、ファイルサイズを削減し、ページの読み込み時間を改善します。 その制限に注意してください：JavaScriptまたはユーザーインタラクションを介して動的に追加されたクラスを処理しません。 grunt-uncss：
複数のグラントタスクを同時に実行し、全体的なビルド時間を大幅に短縮します。特にマルチコアプロセッサで有益です。
• grunt-concurrent（以前は）：
依存関係を管理する際の時間と労力を節約するために、bowerコンポーネントをHTMLに含めることを自動化します。
• grunt-wiredep：grunt-bower-installプロジェクトで使用される機能のみを含むカスタマイズされたModernizrビルドを生成し、ライブラリのサイズを最小限に抑えます。
1。
• ：ベンダーのプレフィックスを征服 grunt-modernizrCSSの執筆には、実験特性とベンダーのプレフィックスのジャグリングが含まれます。 Autoprefixerライブラリに基づいて、これを簡素化します。 CSSを解析し、データベースを使用する缶に基づいて必要なプレフィックスを追加します。 オプションを使用すると、ターゲットブラウザとバージョンを指定でき、必要なプレフィックスのみが含まれていることを確認してください。
サンプル構成：

この構成プロセスgrunt-autoprefixer、プレフィックスバージョンを

に出力し、メジャーブラウザの最後の2つのバージョンをターゲットに加えて、すなわち8、9、およびオペラ12.1。

2。 grunt-autoprefixer：css browsersをスリムにします UNCSSを搭載した

は、プロジェクトから未使用のCSSを削除します。これは、CSSフレームワークを使用する場合に非常に貴重です。最終的なCSSファイルサイズを大幅に削減し、ダウンロードが速くなります。

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

制限：

main.cssJavaScriptまたはユーザーインタラクションを介して動的に追加されたCSSクラスを検出できません。 これに部分的に対処するには、main-prefixed.cssオプション（リテラルクラス名または正規表現パターンを受け入れる）を使用します。 複雑なセレクターもエラーを引き起こす可能性があります。これらを別々のスタイルシートで分離します

3。 grunt-wiredep：楽な依存管理

Bower（JavaScript/CSS依存関係マネージャー）には、HTMLにコンポーネントを手動で含める必要があります。これを自動化し、構成に基づいて依存関係を注入します grunt-wiredep基本的な構成：

これにより、依存関係が

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

に注入されます。 実行後、

、HTMLには次のような行が含まれます。 index.html 4。 grunt-wiredep：Modernizr

を最適化します

Modernizrは、最新の機能のブラウザのサポートを検出するのに役立ちます。 grunt-modernizrプロジェクトが使用する機能のみを含むカスタマイズされたModernizrビルドを作成し、より小さく、より効率的なライブラリになります。

の例構成：

grunt-modernizr

5。

：速度の並列処理

多くのタスクを備えたプロジェクトの場合、

<code class="language-javascript">grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});</code>

は同時にそれらを実行し、特に強力なマシンでビルドプロセスを大幅に高速化します。

例：grunt-concurrent

これは、grunt-concurrentタスクの下で同時に

と

を実行します。

この選択は、うなり声ベースのワークフローを強化するための強固な基盤を提供します。 膨大なグラントプラグインエコシステムを探索して、開発プロセスを合理化するためのさらに多くのツールを発見してください。

以上があなたが勝った5つのグラントタスク＆＃x27; Tは見逃したいです！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。