Gunt入門教程二:配置タスク

10849 ワード

grunt

2.1 Graunt配置
タスク設定は、GuntFileファイルにおけるgrunt.initConfig方法で定義されています.この設定は通常、ジョブ名で命名された属性がいくつかありますが、任意のデータも含まれています.一つの属性がタスクに使われていないと無視されます.
また、これはJavaScriptファイルですので、どのような合法的なJSコードでも書くことができます.JSONだけではありません.必要であれば、コードで構成を動的に生成することもできます.

grunt.initConfig({
  concat: {
    // concat task configuration goes here.
  },
  uglify: {
    // uglify task configuration goes here.
  },
  // Arbitrary non-task-specific properties.
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});

2.2タスクの設定とタスクの目標
タスクが実行されると、Grauntは設定中の同名の属性を自動的に探します.複数のタスクは、カスタマイズされた「ターゲツ」属性によって設定できます.以下の例では、concatタスクはfooとbarの2つの目標があり、glifyは1つのbarターゲットだけがある.

grunt.initConfig({
  concat: {
    foo: {
      // concat task "foo" target options and files go here.
    },
    bar: {
      // concat task "bar" target options and files go here.
    },
  },
  uglify: {
    bar: {
      // uglify task "bar" target options and files go here.
    },
  },
});

タスク名とターゲット名を指定します.例えば、grunt concat:fooまたはgrunt concat:barは目標名だけで指定された構成を実行します.grunt concatを直接実行すると、すべての目標が順次実行されます.なお、タスクがgrunt.renameTaskによって名前が変更された場合、Guntはconfigオブジェクトの中から新しい名前の命名属性を探しています.
2.3デフォルトの設定
一つのタスク構成では、Ooptions属性によってデフォルトの設定を上書きすることができます.タスクの各ターゲットにも対応するオプティクス属性があります.ターゲットのoptions設定は、タスクのoptionsを上書きします.
options属性はオプションです.必要でなければ省略できます.

grunt.initConfig({
  concat: {
    options: {
      // Task-level options may go here, overriding task defaults.
    },
    foo: {
      options: {
        // "foo" target options may go here, overriding task-level options.
      },
    },
    bar: {
      // No options specified; this target will use task-level options.
    },
  },
});

2.4ファイル
ほとんどのタスクはファイル操作を実行するので、Grontは操作するファイルに強い抽象を持っています.いくつかの方法でソースファイルからターゲットファイルへのマッピングが可能です.多段の冗長性と制御が可能です.どのようなマルチタスクでも次のようなフォーマットが理解できますので、最適なフォーマットを使ってもいいです.
すべてのファイルのフォーマットは、「src」と「dest」をサポートしていますが、「簡潔」と「ファイル配列」の2つのフォーマットは、以下のような追加属性をサポートしています.
filter:フィルタ、任意の合法的なfs.stats方法名(http://nodejs.org/docs/latest/api/fs.html#fs_class_fs_stats)または任意のSrcをファイルパスとして受け入れ、TrueまたはFalseに戻す方法があります.nonull:非空です.マッチが見つかったら、このモード自体を含むリストに戻ります.そうでないと、空のリストに戻ります.このオプションは、gruntの-verboseパラメータを組み合わせてファイルの調整を支援します.
dot:パターンをピリオドで始まるファイル名にマッチさせてもいいです.パターンが明示的にピリオドを指定しなくてもいいです.match Base:ベースパスだけにマッチしています.このパラメータを設定したら、サブディレクトリは作られません.たとえばa?bはマッチングします./xyz/123/acbはマッチングしません.ただし、xyz/acb/123は一致しません..
expand:拡張して、動的なソースファイルのターゲットファイルへのマッピングを実行します.「Buiding the files object dynamically」を参照してください.
他のすべてのパラメータは構成パラメータとして下のライブラリに渡されます.node-globを参照してください.https://github.com/isaacs/node-glob)とミニウォッチ(https://github.com/isaacs/minimatch)2.5簡潔なフォーマット
このモードは一般的にリードオンリータスクで使用されていますが、一つのsrc属性だけが必要です.シンプルなフォーマットでも追加属性がサポートされています.

grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
});

2.6ファイルオブジェクトフォーマット
このフォーマットは、一つのターゲットに複数のソースファイルからターゲットファイルへのマッピングを設定できます.属性名はターゲットファイルであり、属性値はソースファイルです.各ターゲットファイルには任意の数のソースファイルが定義されますが、追加属性はサポートされていません.

grunt.initConfig({
  concat: {
    foo: {
      files: {
        'dest/a.js': ['src/aa.js', 'src/aaa.js'],
        'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
      },
    },
    bar: {
      files: {
        'dest/b.js': ['src/bb.js', 'src/bbb.js'],
        'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
      },
    },
  },
});

2.7ファイル配列フォーマット
このようなフォーマットは、1つのターゲットに複数のソースファイルをターゲットファイルへのマッピングを設定することもできます.また、追加の属性を使用することもできます.

grunt.initConfig({
  concat: {
    foo: {
      files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
      ],
    },
    bar: {
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },
  },
});

2.8古いフォーマット
これは、マルチタスクと複数のターゲットが現れる前の古いフォーマットです.このような構成のターゲットファイルのパスは、実際に目標名です. grunt task:target このようなコマンドが間違っています.このようなフォーマットはおすすめできません.

grunt.initConfig({
  concat: {
    'dest/a.js': ['src/aa.js', 'src/aaa.js'],
    'dest/b.js': ['src/bb.js', 'src/bbb.js'],
  },
});

2.9カスタムフィルタリング方法
filter属性は高級なファイルの詳細を定義してくれます.最も簡単なのは、直接に一つのfs.Sttsメソッド名を使うことができます.このコードは真実のファイルにマッチするだけです.

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: 'isFile',
    },
  },
});

あるいは、自分の方法を作成してもいいです.マッチングすべきファイルに対してtrueを返します.マッチしてはいけないファイルに対してfalseを返します.たとえば、この例は空のフォルダにのみマッチします.

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
      },
    },
  },
});

2.10 globbingモード(翻訳があまり良くなく、正規のような)
全てのソースファイルを列挙するのは難しい場合がありますので、Grontはnode-globを通じてサポートします.https://github.com/isaacs/node-glob)とミニウォッチ(https://github.com/isaacs/minimatch)ファイル名の説明を行います.
これはglobbingパターンの教程をよく理解していません.ファイルパスで:
「*」は任意の文字にマッチします.
「?」を押す文字にマッチします.「/」を除いてです.
「*」は任意の文字にマッチし、「/」を含む「{}」論理は、カンマで区切られています.
「!」はモードの先頭に否定を表す.ご存知のように、foo/*.jsはfoo/ディレクトリにマッチしています.jsは最後のどのファイル(サブディレクトリは含まれていません.)に対して、foo/***/*.jsはfooとそのサブディレクトリのいずれかにマッチします.
また、複雑なglobbingモードを簡略化するために、Grountは一つのリストに複数のglobbingモードを書き込むことができます.これらのモードは順番に処理されます.「!」で始まるのは排除されます.

// You can specify single files:
{src: 'foo/this.js', dest: ...}
// Or arrays of files:
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}
// Or you can generalize with a glob pattern:
{src: 'foo/th*.js', dest: ...}

// This single node-glob pattern:
{src: 'foo/{a,b}*.js', dest: ...}
// Could also be written like this:
{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

// All .js files, in foo/, in alpha order:
{src: ['foo/*.js'], dest: ...}
// Here, bar.js is first, followed by the remaining files, in alpha order:
{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

// All files except for bar.js, in alpha order:
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// All files in alpha order, but with bar.js at the end.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

// Templates may be used in filepaths or glob patterns:
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
// But they may also reference file lists defined elsewhere in the config:
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...}

globモード文法については、 node-glob(https://github.com/isaacs/node-glob)とミニウォッチ(https://github.com/isaacs/minimatch)
2.11ダイナミック作成ファイル
大量の単一ファイルを処理する場合は、いくつかの追加属性を使ってファイルの動的作成を助けることができます.これらの属性は「簡潔なフォーマット」と「ファイル配列フォーマット」の両方で使用できます.
expand:trueに設定して、これらの属性を有効にします.cwd:すべてのSrcはこの経路に対しています.ただし、含まれていません.src:cwdに対してマッチするパターンが必要です.dest:ターゲットファイル.ext:dest内のすべてのファイルの拡張子を置換します.flaten:destでのすべてのパスのセグメントが入れ替わります.rename:srcに一致するたびに、この方法を呼び出します.destとsrc属性はパラメータとして入ってきます.この関数は新しいdest値を返さなければなりません.同じdestが1回以上返されると、そのsrcを使うたびにソース配列に追加されます.また、以下の例では、minifyという任務staticmumapingとdynamicmumapingが実行しているのと全く同じタスクです.

grunt.initConfig({
  minify: {
    static_mappings: {
      // Because these src-dest file mappings are manually specified, every
      // time a new file is added or removed, the Gruntfile has to be updated.
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
      // Grunt will search for "**/*.js" under "lib/" when the "minify" task
      // runs and build the appropriate src-dest file mappings then, so you
      // don't need to update the Gruntfile when files are added or removed.
      files: [
        {
          expand: true,     // Enable dynamic expansion.
          cwd: 'lib/',      // Src matches are relative to this path.
          src: ['**/*.js'], // Actual pattern(s) to match.
          dest: 'build/',   // Destination path prefix.
          ext: '.min.js',   // Dest filepaths will have this extension.
        },
      ],
    },
  },
});

任意の静的および動的な方法を組み合わせて使用することができます.
2.12テンプレート
テンプレートを「%」で定義すると、設定からデータを読み取り、テンプレートを展開します.テンプレートはテンプレートがないまで再帰的に拡張されます.
configオブジェクト全体がテンプレートの文脈を使用しています.また、Guntとその方法はテンプレートで使用できます.
<%=xx%>configオブジェクトをコンテキストとしてxxの値を解析します.タイプは関係ありません.文字列、配列またはオブジェクトは全部可能です.<%>任意のjsコードを実行することは、フロー制御やループ実行などに利用できます.以下の例は一つのconcatタスクで、grunt concat:sampleを実行すると、foo/*.js+bar/*.js+baz/*.jsのファイルを接続し、さらに/*abcde*/のbaerを追加して、最後にbuild/abc de.jsファイルを生成します.

grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */
',   // '/* abcde */
'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']
      dest: 'build/<%= baz %>.js',      // 'build/abcde.js'
    },
  },
  // Arbitrary properties used in task configuration templates.
  foo: 'c',
  bar: 'b<%= foo %>d', // 'bcd'
  baz: 'a<%= bar %>e', // 'abcde'
  qux: ['foo/*.js', 'bar/*.js'],
});

2.13外部データの導入
以下の例では、プロジェクトのメタデータは、package.jsonファイルから導入されます.uglify(http://github.com/gruntjs/grunt-contrib-uglify)プラグインの役割は、ソースファイルを圧縮し、メタデータの構成により、bannerを追加することができる.
Grauntにはgrunt.file.readJSONとgrunt.file.readYAMLがあります.それぞれjsonとyamlファイルを導入します.

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
    },
    dist: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'dist/<%= pkg.name %>.min.js'
    }
  }
});

JavaScriptに深く入る等しい操作子