Görev Koşucular (Gulp, Grunt, vb.) Ve Paketleyiciler (Webpack, Browserify). Neden birlikte kullanalım?

Görev koşucu ve paketleyici dünyasında biraz yeniyim ve şu gibi şeylerden geçerken

Grunt, Gulp, Webpack, Browserify

, Aralarında çok fazla fark olduğunu hissetmedim. Başka bir deyişle, Webpack'in bir görev koşucusunun yaptığı her şeyi yapabileceğini düşünüyorum. Ama yine de yudum ve web paketinin birlikte kullanıldığı çok büyük örneklerim var. Sebebini bulamadım.

Bu konuda yeni olduğum için işleri yanlış yöne alıyor olabilirim. Neyi kaçırdığımı söylersen harika olur. Yararlı bağlantılara açığız.

Şimdiden teşekkürler.

Grunt ve Gulp aslında görev koşucularıdır ve yapılandırma odaklı görevler ile akış tabanlı dönüşümler gibi farklılıkları vardır. Her birinin kendi güçlü ve zayıf yönleri vardır, ancak günün sonunda, daha büyük bir yapı problemini çözmek için çalıştırılabilecek görevler oluşturmanıza hemen hemen yardımcı olurlar. Çoğu zaman, uygulamanın gerçek çalışma zamanıyla hiçbir ilgisi yoktur, bunun yerine çalışma süresinin beklendiği gibi çalışması için dönüştürürler veya dosyaları, yapılandırmaları ve diğer şeyleri yerine koyarlar. Bazen uygulamanızı çalıştırmak için ihtiyaç duyduğunuz sunucuları veya diğer işlemleri bile oluştururlar.

Webpack ve Browserify , paket paketleyicileridir. Temel olarak, bir paketin tüm bağımlılıklarını çalıştırmak ve kaynaklarını (ideal olarak) bir tarayıcıda kullanılabilecek tek bir dosyada birleştirmek için tasarlanmıştır. Modern web geliştirme için önemlidirler, çünkü Node.js ve v8 derleyicisiyle çalışmak üzere tasarlanmış çok sayıda kitaplık kullanıyoruz . Yine, artıları ve eksileri vardır ve bazı geliştiricilerin birini veya diğerini (veya bazen her ikisini de!) Tercih etmelerinin farklı nedenleri vardır. Genellikle bu çözümlerin çıktı paketleri, potansiyel olarak büyük bir pakette doğru dosyaya veya modüle ulaşmanıza yardımcı olacak bir tür önyükleme mekanizmaları içerir.

Koşucular ve bundlers arasındaki bulanık çizgi paket hazırlama karmaşık dönüşümler ya da yapabileceği olabilir trans-pilations onlar görev koşucular yapabileceği birçok şey yapabilirsiniz, böylece onların çalışma süresinde. Aslında, browsererify ve webpack arasında , kaynak kodunuzu değiştirmek için kullanabileceğiniz muhtemelen yaklaşık yüz transformatör vardır. Karşılaştırma için, şu anda npm'de listelenen en az 2000 gulp eklentisi var . Böylece uygulamanız için en iyi neyin işe yaradığına dair net (umarız ...;) tanımları olduğunu görebilirsiniz.

Bununla birlikte, hem görev çalıştırıcıları hem de paket paketleyicileri aynı anda veya birlikte kullanan karmaşık bir proje görebilirsiniz. Örneğin, ofisimde projemize başlamak için gulp kullanıyoruz ve webpack aslında uygulamamızı tarayıcıda çalıştırmak için ihtiyaç duyduğumuz kaynak paketlerini oluşturan belirli bir yudum görevinden çalıştırılıyor. Ve uygulamamız izomorfik olduğundan , bazı sunucu kodunu da paketliyoruz .

Benim mütevazı görüşüme göre, tüm bu teknolojilere aşina olmak isteyebilirsiniz çünkü muhtemelen kariyeriniz boyunca hepsini göreceksiniz (kullanacaksınız).

Kendi görev çalıştırıcımı / paketleyicimi oluşturdum.

Kullanımı yudumdan ve muhtemelen web paketinden daha basittir (her ne kadar web paketi kullanmadım bile).

Çok basittir ve kutudan çıktığı gibi babel, göz atma, çirkinleştirme, küçültme ve gidonlara sahiptir.

Sözdizimi şuna benzer:

const Autumn = require("autumn-wizard");




const w = new Autumn();

//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
    './lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
    var dstPath = w.replace('/src/', '/dist/', srcPath);
    dstPath = w.replace('.scss', '.css', dstPath);
    dstPath = w.replace('.css', '.min.css', dstPath);
    w.minify(srcPath, dstPath, {
        sourceMap: useSourceMap,
    });
});


//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
    debug: useSourceMap,
});


//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
    "./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);

Ve belge burada: https://github.com/lingtalfi/A autumn

Umarım yardımcı olur.