@@ -74,7 +74,56 @@ gulp.task("sass", function() {
74742 . 取得したファイルの先頭に"prefix text"という文字列を追加する
75753 . 変更したファイルを` build/ ` ディレクトリに出力する
7676
77+ [ gulp-prefixer.js] ( #gulp-prefixer.js ) を見てみると、` gulpPrefixer ` という[ Transform Stream] ( https://nodejs.org/api/stream.html#stream_class_stream_transform " stream.Transform ") のインスタンスを返していることが分かります。
7778
79+ Transform Streamというものが出てきましたが、Node.jsのStreamは次の4種類があります。
80+
81+ - Readable Stream
82+ - Transform Stream
83+ - Writable Stream
84+ - Duplex Stream
85+
86+ 今回の` default ` タスクの処理をそれぞれ当てはめると次のようになっています。
87+
88+ 1 . ` ./*.* ` にマッチするファイルを取得 = Readable Stream
89+ 2 . 取得したファイルの先頭に"prefix text"という文字列を追加する = Transform Stream
90+ 3 . 変更したファイルを` build/ ` ディレクトリに出力する = Writable Stream
91+
92+ あるファイルを_ Read_ して、_ Transform_ したものを、別のところに_ Write_ としているというよくあるデータの流れと言えます。
93+
94+ [ gulp-prefixer.js] ( #gulp-prefixer.js ) では、gulpから流れてきたデータをStreamとして受け取り、
95+ そのデータを変更したもの次のStreamに流すということを行っています。
96+
97+ 「gulpから流れてきたデータ」を扱うために` readableObjectMode ` と` writableObjectMode ` をそれぞれ` true ` にしています。
98+ この_ ObjectMode_ というのは名前の通り、Streamでオブジェクトが流れるという設定のことです。
99+
100+ 通常のNode.js Streamは[ Buffer] ( https://nodejs.org/api/buffer.html " Buffer ") というバイナリデータを扱います。
101+ この[ Buffer] ( https://nodejs.org/api/buffer.html " Buffer ") は文字列オブジェクトと相互変換が可能ですが、複数の値を持ったオブジェクトを扱うのは少し変更です。
102+
103+ そのため、Node.js Streamには[ Object Mode] ( https://nodejs.org/api/stream.html#stream_object_mode " Object Mode ") があり、
104+ JavaScriptのオブジェクトそのものをStreamで流せるようになっています。
105+
106+ gulpでは[ vinyl] ( https://github.com/gulpjs/vinyl " vinyl ") オブジェクトがStreamとして流れてきます。
107+ このvinylは_ Virtual file format_ というように、データをラップした抽象フォーマットのオブジェクトです。
108+
109+ なぜこういった抽象フォーマットが必要なのかは次のことを考えてみると分かりやすいと思います。
110+
111+ ` gulp.src ` で読み込んだファイルの中身のみが、Transform Streamに渡されてしまうと、
112+ Transform Streamからはそのファイルのパスや読み取り属性などの詳細な情報を知ることができません。
113+ そのため、` gulp.src ` で読み込んだファイルはvinylでラップされ、ファイルの中身は` contents ` として参照できるようになっています。
114+
115+ この抽象フォーマットの` contents ` はStreamまたはBufferとなっているので、
116+ 両方対応する場合は以下のように両方のパターンに対応したコードを書く必要があります。
117+
118+ ``` js
119+ if (file .isBuffer ()) {
120+ file .contents = prefixBuffer (file .contents , prefix);
121+ }
122+
123+ if (file .isStream ()) {
124+ file .contents = file .contents .pipe (prefixStream (prefix));
125+ }
126+ ```
78127
79128- [ ] どういう用途に向いている?
80129- [ ] どういう用途に向いていない?