グラントで素晴らしいビルドスクリプトを書く

このガイドは、最新のWebプロジェクト向けに、強力なビルドシステムであるGruntを構成する方法を示しています。 完了すると、GruntFileは、ファイルのコピー、ビルドクリーンアップ、ベンダーのプレフィックス、Coffeescriptコンピレーション、CSSとJavaScriptの縮小、Jadeコンパイル、ソース変更の自動再構築、ローカル開発サーバーなどのタスクを自動化します。

重要な概念

Gruntセットアップ：
• node.js、npm、およびgrunt cliをインストールします。 プロジェクトをNPMパッケージとして初期化し、グラントプラグインを管理するために依存関係を定義します。 タスクの構成：package.json
を使用してタスクを定義します（たとえば、ファイルのコピー、クリーニング、スタイラス/コーヒースクリプト/ジェイドコンピレーション）。 サブタスクは、単一のタスク内で複数の構成を可能にします
• オートメーションと最適化：Autoprefixer（CSSベンダープレフィックス）、UglifyJS（JavaScript Minification）、CSSMIN（CSS圧縮）などのレバレッジプラグイン。 grunt.initConfig
開発ワークフロー：
• ソースの変更に関する自動再構築には、ネットワークアクセス可能な開発サーバーの場合。
• カスタムタスク：チェーン操作（例えば、クリーニング、コンパイル、コピー）を介してカスタムタスクを作成し、モジュール性とメンテナビリティを促進します。 grunt-contrib-watchgrunt-contrib-connect始めましょう
• node.jsとnpmをインストールします。グローバルにグラントCLIをインストールします：。次のコンテンツを含むgrunt.registerTaskファイルを作成します：

これは、プロジェクトとその依存関係を定義します。 それらをインストールするにはを実行します

ファイルのコピーとビルドクリーンアップ

npm install -g grunt-cli package.jsonソースコードを維持し、ファイルを個別にビルドします。

：

{
  "name": "grunt_tutorial",
  "description": "Grunt setup for web development.",
  "author": "Landon Schropp (http://landonschropp.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10"
}

を作成します

npm installこれにより、ファイルが

から

からのコピーがコピーされ、ディレクトリがクリーニングされます。 実行

。

Gruntfile.js

（スタイラス、オートプレフィキサー、CSSミニフィケーション、coffeescript、uglify、ja、時計、および開発サーバーの詳細なセクションでは、コードスニペットと説明の同様の構造に従います。長さのために、私はそれらをここで省略しました

module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      build: {
        cwd: 'source',
        src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ], // Exclude compiled files
        dest: 'build',
        expand: true
      },
    },
    clean: {
      build: { src: [ 'build' ] },
      stylesheets: { src: [ 'build/**/*.css', '!build/application.css' ] },
      scripts: { src: [ 'build/**/*.js', '!build/application.js' ] },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('build', ['clean:build', 'copy']);
};

結論sourcebuild この合理化されたガイドは、堅牢で効率的なグラントベースのビルドプロセスを構築するための基盤を提供します。 ワークフローをさらにカスタマイズするために、広大なGruntプラグインエコシステムを探索してください。

以上がグラントで素晴らしいビルドスクリプトを書くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。