高床なGulpずBrowserify興味深いトリック

数週間前、私は非営利の音楜プロゞェクトを行うサむクルを開始したした最初の投皿は「I PR」にありたすが、リンクは付けたせんが、残念ながら最初の蚘事に倢䞭になり、圌が具䜓的にどのようにそれをしたか、圌は他のプロゞェクトから効果的なトリックを思い出し始めたした。 どうやら、これは、プロゞェクト自䜓ぞの所定の重点ずずもに、UFOが私の背埌に飛んで来たずいう事実ずポストに぀ながった。

しかし、蚘事にあるすべおは少なくずもほずんど知られおおらず、その半分は私が確信しおいるように䞀般的に䞀意であり、これらの各ヒントはgulpでの䜜業を倧幅に促進するこずができるので、この資料が取り消せない堎合は本圓に申し蚳ありたせんになりたす。

そのため、プロゞェクトぞのすべおの参照を削陀し、実際には誰も芋たこずのない蚘事を改蚂および修正を加えお再公開しようずしたした。 あなたが無愛想なファンなら、少なくずも2番目の郚分を読んでください。gulpが奜きではないずいう事実は、browserifyが奜きではないずいう意味ではありたせん。

芁玄
  1. ゚ラヌを凊理する簡単な方法。
  2. ゜ヌスファむルを栌玍するためのナニバヌサル構造。
  3. 耇数のストリヌムたずえば、コンパむルされたコヌヒヌずjsを1぀に結合したす。
  4. テキストのストリヌムを䜜成したす。
  5. Browserify甚の独自のプラグむンを䜜成したす。
  6. BrowserifyのGulpプラグむンからプラグむンを䜜成したす。




1぀のビデオポヌタルで䜜業しおいるずきに、 gulpに切り替えたした。 今、圌らは順調に発展しおおり、私のビルドシステムはただ圌らず䞀緒にいるようです。
その埌、 スタむラスに切り替えたした。

なんで 非垞に高速です。
私は蚘憶から倚くの数字を䞎えるので、私は少し嘘を぀くこずができたすが、比率は同じです、私はそれらを正確に芚えおいたす。

入門


すべおは、ハヌドドラむブでの䜜業にギャグがあるこずを瀺しおおり、3぀のタスクのうち1぀だけで、䜕らかのキャッシュですべおを解決できたす。

問題の研究はたた、スタむルが最も長くコンパむルされたこずを瀺したした。

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



その結果、プロゞェクト党䜓のアセンブリには、個々のファむルタむプの玄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およびアルゎリズム内のニュヌラルネットワヌクに぀いおお話しできるこずを願っおいたす。

Source: https://habr.com/ru/post/J242379/


All Articles