gulpに精通する鍵:ファイルパスマッチングモードglobs

簡単に言えば、gulpのアプリはとても簡単です.4つだけです.彼らはglp.src、glp.dest、glp.task、glp.watchです.ですから、簡単にgulpを使うのは簡単ですが、glpを上手に使いたいというのは簡単なことではありません.その中で最も重要な点は、nodejsファイル経路整合パターンglobsの理解にある.
gulpの4つのappのうち、glp.taskは一つのタスクを作成し、gulp.srcはファイルディレクトリの中のそれらの位置gulp.destに対してターゲットファイルが処理されたらどの位置で再生成されるかを示し、gulp.watchはそれらの位置ファイルの変化を監視すると表しています.
taskを除いて、他の3つのappはファイルパスと密接に関係しています.gulp.srcとglp.watchは直接golbsを最初のパラメータとしています.gulpの各プラグインは自分が処理するのがその位置のファイルであることを知る必要があります.golbsは処理されるファイルの位置を指定します.
先端の理解が違い、先端の項目構造もそれぞれ異なるので、golbsの配置がより重要になります.以下にご紹介します.golbsのマッチングルールをご紹介します.
ざっと読みますと、マスターできないかもしれませんので、保管してゆっくり見てください.* ファイル内の0文字または複数の文字にマッチしますが、パス内のセパレータは一致しません.パスセパレータが末尾に表示される場合、たとえば下のような書き方がない限り、パス内のセパレータは一致しません.

//   ./style      js  
./style/*.js

//   ./style        
./style/*.*

//       ，            js     ./style/a/b.js
./style/*/*.js

** ファイルパスの中の0つ以上の階層のディレクトリにマッチするには、個別に出現する必要があります.最後に表示されても、ファイルにマッチすることができます.

//   style             js  ，    
// ./style/a.js
// ./style/lib/res.js
// ./style/mudules/b/a.js
./style/**/*.js

//   style           ，     
// ./style/a.js
// ./style/bb
// ./style/images/c.png
./style/**/*

? パスの区切りにマッチしない文字にマッチします.

//              js  ， a.js, b.js ,         2        js   
?.js

[...] 複数の規則で構成された配列は、サブアイテムの最初の文字が、任意のサブアイテムに適合する配列にマッチすることができます.または^の場合、このルールに合わないことを表します.

//   style    a0.js, a1.js, a2.js, a3.js
'./style/a[0-3].js'

//   node_modules    ，           html  
['./**/*.html', '!node_modules/**']

{...} 展開モードは、中身によって複数のルールに展開され、すべての展開後のルールにマッチして上記の例を拡張します.次のように書くことができます.

//   build,simple,images,node_modules  ，         html php  
['./**/*.{html, php}', '!{build, simple, images, node_modules}/**']

!(pattern|pattern|pattern) 各ルールはpatternで表しています.ここではこれらのパターンに合致する全てのファイルを排除することを指します.

//              js  ，    jquery.js     js  
'./style/!(?|jquery).js'

//   build node_modules  ，            _   html php  ，     html php  
//                     ，      
['./**/!(_)*.{html, php}', '!{build, node_modules}/**']

?(pattern|pattern|pattern) 指定された括弧のいずれかのパターンにマッチします.0回または1回です.

//   style    a.js, a2.js, b.js
//     
//   0   1 
'./style/?(a|a2|b).js'

@(pattern|pattern|pattern) 複数のモードのいずれかにマッチします.

//   style    a.js, b.js, c.js
//     
//     ，    ，   ?   
'./style/@(a|b|c).js'

+(pattern|pattern|pattern) かっこの中の任意のパターンにマッチします.1回または複数のパターンを組み合わせてマッチします.

//     style    a.js, a2.js, b.js
//            ab.js, aa2.js, a2b.js 
//       ，     
'./style/+(a|a2|b).js'

*(pattern|pattern|pattern) 指定されたモードのいずれかにマッチするかっこを0回以上選択します.これらのモードを組み合わせてマッチします.

//     style    a.js, b.js, c.js
//            ab.js, bc.js, ac.js
//   0     
'./style/*(a|b|c).js'

ほとんど使えるルールは上にあります.実際に使う時は、globsモードを把握していれば、glpに精通するまではそんなに遠くないです.
API
glp.src(globs[,options])
globsを徹底的に理解したら、振り返ってglpを勉強するこのいくつかのアプリはとても簡単になります.glp.srcはglpタスクのターゲットファイルの位置を指定します.最初のパラメータglobsは必須です.中かっこはオプションパラメータを表します.Ooptionsはjsonオブジェクトglobsを配置して目標ファイルの位置を指定します.ここではもう過去に一番詳しく紹介しました.ここでは簡単な紹介をしてください.

gulp.src('./**/!(_).{php, html}', {
    buffer: true,
    read: true,
    base: './'
})

options.buffer
タイプ:Booleanデフォルト:trueはこの項目がfalseに設定されている場合、ファイルbufferの形式ではなく、stream方式でfile.co ntsに戻ります.これは大きいファイルを扱う時にとても役に立ちます.なお、Gulpプラグインはstreamをサポートしていない可能性があります.
options.read
タイプ:Booleanデフォルト:trueがfalseに設定されていると、file.com ntsは空の値(null)に戻ります.つまりファイルを読み込むことはありません.
options.base
タイプ:Stringデフォルト値:最初のパラメータディレクトリでは、globマッチングモード前のパスはBaseを理解することが重要であり、ファイル処理が完了した後、新しいファイルが作成されたディレクトリに影響を及ぼします.
例えば、1つのパスがstatic/scripts/libsのディレクトリの中に、dialog.jsというjsコンポーネントがあります.

//   static/scripts/libs/dialog.js，  base    static/scripts
gulp.src('static/scripts/**/*.js')
  .pipe(minify())

  //        ，   build   base，   build/libs/dialog.js
  .pipe(gulp.dest('build'));

//     base  
gulp.src('static/scripts/**/*.js', { base: 'static' })
  .pipe(minify())

  //   build  base，    build/scripts/libs/dialog.js
  .pipe(gulp.dest('build'));

gulp.dest(path[, options])pipeに入ることができます.そしてファイルを書きます.すべてのデータを再出力します.つまり、処理が完了した後のファイルを新規に作成します.彼を複数のフォルダにpipeすることができます.フォルダが存在しない場合、自動的に新規作成されます.使い方については、上の例と併せて理解することができます.
指定されたパスをgulp.srcパラメータoptionsのbaseに置換します.結果として、新しいファイルの位置です.
gulp.destのoptionsはあまり使ったことがないので、上のような感じがしません.略しました.
gulp.task(name[,deps],fn)
gulpタスクを定義します

gulp.task('somename', function() {
  // dosomething
})

nameタイプ:stringタスクの名前は、コマンドラインであなたのいくつかのタスクを実行する必要がある場合、タスク名にスペースを使わないでください.
depsタイプ:arrayタスクリストを含む配列で、これらのタスクは現在のタスクが実行される前に完了します.

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // dosomething
})

必ずあなたが依頼したタスクリストの中のタスクが正しい非同期実行方式を使用していることを確認してください.
fn関数は、タスクを定義するために必要ないくつかの動作を定義します.一般的には、このような中形式になります.

gulp.src().pipe(someplugin())

非同期タスクは、fnが以下のいずれかの点を行うことができれば、非同期的に実行することができます.
calbackを一つ受けます.

//   shell        
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  //    Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); //    error
    cb(); //    task
  });
});

streamを返します

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

またはプロミスを返します.

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  //        
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

デフォルトでは、taskは最大の合併数で実行されます.つまり、gulpはすべてのtaskを一度に実行し、待つことは何もありません.プログレッシブなtask列を作成したいなら、特定の順序で実行してください.二つのことを行う必要があります.
この例については、まず二つのtask、one、twoがあると仮定して、この順序で実行してほしいです.
aは「one」の中で、いつ完成するかを知らせるためにヒントを入れてください.また完成したらcalbackに戻ります.あるいはpromiseやstreamに戻ります.このようにシステムは完成を待ちます.
b「two」では、システムに最初のtaskに依存して完成する必要があるというヒントを追加する必要があります.
したがって、この例の実際のコードはこうなるであろう.

var gulp = require('gulp');

//      callback，               
gulp.task('one', function(cb) {
    //      --         
    //    err    null   undefined，      ，   ，         
    cb(err);
});

//          task       task       
gulp.task('two', ['one'], function() {
    // 'one'    
});

gulp.task('default', ['one', 'two']);

glp.watch(glob[,options],task)またはglp.watch(glob[,options,cb])
ファイルを監視して、ファイルが変わった時に何かをすることができます.イベントを送信するためにEventEmitterに戻ります.
glp.watch(glob[,options],taskys)
globとoptionsは略します.
taskysタイプ:配列はファイルの変動後に実行する必要がある一つまたは複数のglp.task()によって作成されるtaskの名前、

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

glp.watch(glob[,options,cb])
globとoptionsは略します.
cbタイプ:Functionが変動するたびに実行するコールバック関数

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

calbackはイベントというオブジェクトに伝えられます.このオブジェクトは監視された変更を説明します.
event.typeタイプ:Stringが変動する行動タイプ:added、changed、deleted
event.path タイプ:Stringトリガイベントのファイルパス
はい、gulpのアプリと肝心なglobsは全部紹介しました.基本的にgulpもマスターしました.これから私たちがするべきことは、様々なタスクを遂行するためのプラグインを徐々に知ることです.多くのプラグインは簡単で、npmでも使い方が分かりますので、心配することはありません.