👨‍👩‍👧‍👦 ☝🏾 🤔 高度なGulpとBrowserify：興味深いトリック ➿ 👨🏼‍🔧 🌕

数週間前、私は非営利の音楽プロジェクトを行うサイクルを開始しました（最初の投稿は「I PR」にありますが、リンクは付けません）が、残念ながら最初の記事に夢中になり、彼が具体的にどのようにそれをしたか、彼は他のプロジェクトから効果的なトリックを思い出し始めました。どうやら、これは、プロジェクト自体への所定の重点とともに、UFOが私の背後に飛んで来たという事実とポストにつながった。

しかし、記事にあるすべては少なくともほとんど知られておらず、その半分は私が確信しているように一般的に一意であり、これらの各ヒントはgulpでの作業を大幅に促進することができるので、この資料が取り消せない場合は本当に申し訳ありませんになります。

そのため、プロジェクトへのすべての参照を削除し、実際には誰も見たことのない記事を（改訂および修正を加えて）再公開しようとしました。あなたが無愛想なファンなら、少なくとも2番目の部分を読んでください。gulpが好きではないという事実は、browserifyが好きではないという意味ではありません。

要約：

エラーを処理する簡単な方法。
ソースファイルを格納するためのユニバーサル構造。
複数のストリーム（たとえば、コンパイルされたコーヒーとjs）を1つに結合します。
テキストのストリームを作成します。
Browserify用の独自のプラグインを作成します。
BrowserifyのGulpプラグインからプラグインを作成します。

1つのビデオポータルで作業しているときに、 gulpに切り替えました。今、彼らは順調に発展しており、私のビルドシステムはまだ彼らと一緒にいるようです。

その後、 スタイラスに切り替えました。

なんで？非常に高速です。

私は記憶から多くの数字を与えるので、私は少し嘘をつくことができますが、比率は同じです、私はそれらを正確に覚えています。

入門：

うなり声;
相互にほとんど関係のない多数のスタイルファイル（混乱しない場合は73）があります。アセンブリ-接着によるものです。基本的に、スタイルはコンポーネントであり、ページフックおよびレイアウトであるため、互いに独立しています。ほとんどの場合、変数のセットのみが接続されています。
1つにまとまる多数のスクリプトがあります。 CoffeeScriptがコンパイルされ、通常のjsは変更されません。各ファイルはクロージャーでラップされます。
グローバルスペースのフォルダーからすべてのテンプレートを使用してオブジェクトを作成する特別なプラグインを使用して、多数のプリコンパイルされたヒスイテンプレートからアセンブルされたアプリケーションファイルがあります。実際、出力もjsファイルです。
各アイテムの組み立て時間は、Macbook Air 2013、i5では合計で約10秒、約30〜40秒です。 PCIeを介して接続されているMBAにはSSDがあり、ハードドライブの操作速度を提供します。これは、通常のSATA接続では原理的に達成できないようです。 HDDを搭載したコンピューターでは、組み立てに1分以上かかる場合があります。

すべては、ハードドライブでの作業にギャグがあることを示しており、3つのタスクのうち1つだけで、何らかのキャッシュですべてを解決できます。

問題の研究はまた、スタイルが最も長くコンパイルされたことを示しました。

この問題の解決策は次のとおりです。

gruntをgulpに置き換えます。コンパイルとスタイルとスクリプトの接着の問題は解決されました-個々のファイルのディスクへの書き込みのステップは削除されました。
sassをスタイラスに置き換え、すべてをグローバルファイルのインクルードに変換します。スタイルのコンパイルは1秒未満に加速されます。どうやら、ノードからルビーに各ファイルを転送すると、多くのリソースを消費しました。そして、ルビーサスは非常に高速ではありません。ちなみに、転送はまったく問題なく行われました-sassは基本的なものを使用し、mixinと関数を使用せず、特定の観点から、sass形式はスタイラス形式のサブセットと呼ぶことができます。
すべてのcoffeescriptをJSに変換してコンパイルを高速化するのは良いことです。これらはほとんどが古いウィジェットでした。
アプリケーションのjsアセンブリを翻訳して、キャッシング用にブラウザー化します。

その結果、プロジェクト全体のアセンブリには、個々のファイルタイプの約3〜4秒、約1秒かかりました。

もちろん、ウォッチドッグは一般的に即座に解決しました。

それ以来、gulp + browserifyスタックを使用しています。

ブラウザーブラウザーの利点-ウィジェットをクロージャーでラップすることと、本質的に最も単純なコード検証-解析できないコードを見逃しません。

ただし、失敗したコードはコレクターを強制的にクラッシュさせました。もちろん、これは事実ではありませんでした。

エラー処理

最初の解決策は次のようなものでした：

gulp.task('build-html', function () { ... .pipe(plugins.jade()).on('error', console.log.bind(console)) ...

しかし、判明したように、これはあまり良くありません。ストリームは「フリーズ」し、更新時に再起動しません。

なぜこれが起こっているのですか？実際には、タスクは終了せず、この状態でハングしたままであり、一言で言うと、前の実行が終了しないと再起動は不可能であるようです。

私は長い間この問題の良い解決策を探していましたが、やがてこの問題を解決するための独自の関数を書きました：

 function log(error) { console.log([ '', "----------ERROR MESSAGE START----------".bold.red.underline, ("[" + error.name + " in " + error.plugin + "]").red.bold.inverse, error.message, "----------ERROR MESSAGE END----------".bold.red.underline, '' ].join('\n')); this.end(); } gulp.task('build-html', function () { ... .pipe(plugins.jade()).on('error', log) ...

また、ストリーム（this.end（））を閉じて、タスクを完了させます。

必要に応じて、たとえばうなり声のアラートを追加できますが、個人的には十分です。

この関数は、事前定義されたカラーnpmパッケージを必要とし、非常に良い結論を与えます。余分なパッケージを配置したくない場合は、花からメソッドを削除できます。

ここで最も重要なことは、最後の行です。

this.end（）を実行すると、特定のgulpタスクが終了します。はい、これはメモリ内で少しがらくたですが、ウォッチドッグタスクを更新すると、スタイルアセンブリを再実行できるようになります。

次のようになります。

フォルダーとファイル

すべてが次のようなフォルダにきちんと配置されている場合：

資産
スタイル
スクリプト
テンプレート

おめでとうございます。

しかし、私にとって個人的にはすべてが次のようなものです。

便利で、以前よりもずっと便利です。なんで？はい、コレクターに何も変更せずに、互いに含まれるファイルを任意に構成する機会があったためです。

@requireをスタイル、レイアウト、テンプレートのインクルードで記述し、スクリプト用にbrowserifyするだけで、すべてが機能します。

最終的には、すべてのプロジェクトの基盤となるindex.html、app.js、style.cssになります。

どうやって手に入れたの？

すべてのプロジェクトで、私は同様のスキームに固執しようとします：

 gulp.task('build-js', function () { return gulp.src('src/**/[^_]*.js') ... gulp.task('build-html', function () { return gulp.src('src/**/[^_]*.jade') ... gulp.task('build-css', function () { return gulp.src('src/**/[^_]*.styl') ...

これはどのようなグロブパスですか？

これは、アンダースコアで始まらないすべてのファイルの選択です。どんな深さでも。したがって、ファイルにsrc / lib / _some_lib.jsという名前を付けた場合、それ自体はコンパイルされません。しかし、喜んでピックアップしてそれを要求します。

さまざまなタスクの結果を接着する

現在、私はこのテクニックを使用していません。コードにすべてを含める回路に切り替えたため、ほとんどメモリから書き込みますので、少しうそをつくことができます。

しかし、それは非常に興味深いものであり、やがてどこにも見つかりませんでした。

「ベンダーフォルダーからすべてのCoffeeScriptファイルとjsファイルを貼り付け、次にメインフォルダーから」などの問題を解決する必要があったとき、最初はどうしたらいいかわからなかったので動揺しました。なぜそのようなシーケンス-明らかだと思います-ベンダースクリプトを最初にロードする必要がありますが、それ以外の方法でそれを行うと、すべてが混乱します。

しかし、何かが私の記憶の中にあれば、それを使用できることを知っていたので、掘り始めました。それでも、gulpはネイティブのnodejsストリームを使用します。つまり、それについて何かを行うことができます。

私は自家製のソリューションに来ました：

 var es = require('event-stream'); gulp.task('build', function(){ return es.concat( gulp.src('scripts/vendor/*.coffee').pipe(coffee()), gulp.src('scripts/vendor/*.js'), gulp.src('scripts/*.coffee').pipe(coffee()), gulp.src('scripts/*.js') ) .pipe(concat()) .pipe(dest(...)); })

注：新しいイベントストリームのドキュメントから判断すると、concatメソッドはmergeに名前が変更されました。私はこれを半年前に最後にやったので、メソッドには新しい微妙な使用法があるかもしれません-コードはEventStreamの既に古いバージョンで動作する実際の比較的古いプロジェクトから取得されます。

プラグイン接続

10〜20個のプラグインがある場合、それらを手動で記述するのは多少面倒になります。

このための別のプラグインがあり、プラグインメソッドでプラグインオブジェクトを作成しますが、同じことをより明確かつ簡単に行うことができます。

 var gulp = require('gulp'), plugins = {}; Object.keys(require('./package.json')['devDependencies']) .filter(function (pkg) { return pkg.indexOf('gulp-') === 0; }) .forEach(function (pkg) { plugins[pkg.replace('gulp-', '').replace(/-/g, '_')] = require(pkg); });

誰かがこのコードの正確な動作を理解していない場合、package.jsonのdevDependenciesのコンテンツを開き、gulp-で始まるすべての要素をプラグイン[pluginName]として接続します。プラグインがgulp-css-base64のような名前の場合、plugins.css_base64で入手できます。

テキストからストリームを作成する方法

メモリ内に何かを作成し、それをストリームに送信する必要がある場合があります（少なくとも同じ接着で）。繰り返しますが、これにはプラグインがありますが、なぜですか？自分ですべてを3行で記述できる場合。

 var gutil = require('gulp-util'); function string_from_src(filename, string) { var src = require('stream').Readable({objectMode: true}); src._read = function () { this.push(new gutil.File({cwd: "", base: "", path: filename, contents: new Buffer(string)})); this.push(null); }; return src; }

gulp-utilのVynil FS上ですべて動作しますが、違いは何ですか？

browserifyのプラグイン

gulpに関する投稿でbrowserifyを使用する理由はい。他のシステムで使用されるメタアセンブリシステムと呼ばれる可能性があるためです。その機能はjs-modulesの単純な接着をはるかに超えており、投稿の次の部分ではすべてが一般的にまとめられます。

browserifyおよびcommonJSモジュールを使用している場合、正直なところ、このように書きたいと思ったことはありませんか？

 var vm = new Vue({ template: require('./templates/_app.html.jade'), ...

ちなみに、これは同じプロジェクトの実際のコードで、UFOが私の後に飛んだ投稿についてです。

判明したように、browserify用のプラグインのリベットは基本です。

最終的にJSを構築するための実際のタスクは次のようになります。

 gulp.task('build-js', function () { return gulp.src('src/**/[^_]*.js') .pipe(plugins.browserify( { transform: [require('./lib/html-jadeify'), 'es6ify'], debug : true } )).on("error", log) .pipe(gulp.dest("build")); });

これは何ですか...そしてどのように機能しますか？はい、非常に簡単です。

最も単純なラッパーは次のようになります。

 var through = require('through'), jade = require('jade'); function Jadify(file) { var data = ''; if (/\.html\.jade$/.test(file) === false) return through(); else return through(write, end); function write(buf) { data += buf; } function end() { compile(file, data, function (error, result) { if (error) stream.emit('error', error); else stream.queue(result); stream.queue(null); }); } } function compile(file, data, callback) { callback(null, 'module.exports = "' + jade.render(data, {filename: file})+ '"\n'; ); } Jadify.compile = compile; Jadify.sourceMap = true; // use source maps by default module.exports = Jadify;

将来的には、スペースを節約するためにコンパイル機能のみを引用します。

すでにすべてのプラグインを暗記しているbrowserify-ninjaがここにいる場合、「そうですか？」

はい、何もありません。

このフォームには、プラグインがすでに存在します。

しかし、コツは構文を変更できることです。

例：

 callback(null, 'module.exports = "' + jade.render(data, {filename: file}) .replace(/"/mg, '\\"') .replace(/\n/mg, '\\n') .replace(/@inject '([^']*)'/mg, '"+require("$1")+"') + '"\n' );

そして今、jadeテンプレートに次のように書くことができます

 style @inject './_font_styles.styl'

その結果、jsのヒスイにはテンプレートを、ヒスイのテンプレートにはスタイルを含めることができます。

たとえば、複数のコレクターを一度に接続できます。

 callback(null, 'module.exports = ' + dot.template(jade.render(data, { filename: file })) + '\n');

これが、JadeでラップされたDoTテンプレートJS機能（HTML上のハンドルバーのようなテンプレートエンジン）を行うものです。

そして、私たちも...

...ドラムロール...

... gulpプラグインを使用して、gulpタスクとしてプラグインできるbrowserifyプラグインを作成します

そして最後に、投稿全体の非難。このデータ文字列をストリームに変換して（投稿の途中で説明した）、gulpで使用できます。上記で示した関数を使用して...

 function string_src(filename, string) { var src = require('stream').Readable({ objectMode: true }); src._read = function () { this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) })); this.push(null) }; return src; } function compile(path, data, cb) { string_src(path, data) .pipe(gulp_stylus()) .pipe(gulp_css_base64({maxWeightResource: 32 * 1024})) .pipe(gulp_autoprefixer()) .pipe(gulp_cssmin()) .on('data', function(file){ cb(null, "module.exports = \""+ file.contents.toString() .replace(/"/mg, '\\"') .replace(/\n/mg, '\\n') + '"'); }) .on('error', cb); }

もう一度、非常に慎重に：

  string_src(path, data) .pipe(gulp_stylus()) .pipe(gulp_css_base64({maxWeightResource: 32 * 1024})) .pipe(gulp_autoprefixer()) .pipe(gulp_cssmin()) .on('data', function(file){ cb(null, "module.exports = \""+ file.contents.toString() .replace(/"/mg, '\\"') .replace(/\n/mg, '\\n') + '"'); })

browserifyに入ったデータをgulpプラグインの束に渡しました。

はい、それは少しhemoです。しかし、結果には価値があります。

なんで？ ~~もちろん、サタンの栄光には~~ 、ブラウザでスタイラススタイルのアセンブリを取得して構成することはできません。スタイラススタイルのアセンブリは、base64画像を吸い取り、自動プレフィックスとミニフィケーションを通過します。

おわりに

gulpは、ほとんどの状況に合わせてカスタマイズできる驚くほどエレガントなシステムです。そして、そのプラグインがbrowserify（および、したがって、他のプロジェクト）で使用できるという事実は、一般的に素晴らしいです。はい、少しhemo核ですが、それは何かです。

何か新しいことを学んだことを願っています。もっと正確に言えば、私はこれを確信していますが、美しく言いたいと思いました。

そして、UFOがHabrに戻り、非常に少量のデータに基づいてユーザーの音楽の好みに関する正確な推奨事項を提供できるWeb Workersおよびアルゴリズム内のニューラルネットワークについてお話しできることを願っています。

高度なGulpとBrowserify：興味深いトリック