Pelari Tugas (Gulp, Grunt, dll) dan Bundler (Webpack, Browserify). Mengapa digunakan bersama?

Saya agak baru di dunia task runner dan bundler dan saat melalui hal-hal seperti

Grunt, Gulp, Webpack, Browserify

, Saya tidak merasa ada banyak perbedaan di antara mereka. Dengan kata lain, saya merasa Webpack dapat melakukan semua yang dilakukan oleh pelari tugas. Tapi tetap saja saya mendapat contoh besar di mana gulp dan webpack digunakan bersama. Saya tidak tahu alasannya.

Menjadi baru dalam hal ini, saya mungkin mengambil sesuatu ke arah yang salah. Akan sangat bagus jika Anda bisa menunjukkan apa yang saya lewatkan. Tautan yang berguna dipersilakan.

Terima kasih sebelumnya.

Grunt dan Gulp sebenarnya adalah pelari tugas, dan mereka memiliki perbedaan seperti tugas yang digerakkan oleh konfigurasi versus transformasi berbasis aliran. Masing-masing memiliki kekuatan dan kelemahannya sendiri, tetapi pada akhirnya, mereka cukup banyak membantu Anda membuat tugas yang dapat dijalankan untuk menyelesaikan masalah build yang lebih besar. Sebagian besar waktu, mereka tidak ada hubungannya dengan waktu berjalan aplikasi yang sebenarnya, tetapi mereka mengubah atau mereka meletakkan file, konfigurasi, dan hal-hal lain di tempat sehingga waktu berjalan berfungsi seperti yang diharapkan. Terkadang mereka bahkan menelurkan server atau proses lain yang Anda perlukan untuk menjalankan aplikasi Anda.

Webpack dan Browserify adalah bundler paket. Pada dasarnya, mereka dirancang untuk dijalankan melalui semua dependensi paket dan menggabungkan sumbernya menjadi satu file yang (idealnya) dapat digunakan di browser. Mereka penting untuk pengembangan web modern, karena kami menggunakan begitu banyak pustaka yang dirancang untuk dijalankan dengan Node.js dan compiler v8 . Sekali lagi, ada pro dan kontra dan alasan berbeda beberapa pengembang lebih memilih satu atau yang lain (atau terkadang keduanya!). Biasanya bundel keluaran dari solusi ini berisi semacam mekanisme bootstrap untuk membantu Anda mendapatkan file atau modul yang tepat dalam bundel yang berpotensi besar.

Garis kabur antara runner dan bundler mungkin adalah bundler juga bisa melakukan transformasi kompleks atau trans-pilations selama run-time mereka, sehingga mereka bisa melakukan beberapa hal yang bisa dilakukan oleh task runner. Faktanya, antara browserify dan webpack mungkin ada sekitar seratus transformer yang dapat Anda gunakan untuk mengubah kode sumber Anda. Sebagai perbandingan, setidaknya ada 2000 plugin gulp yang terdaftar di npm sekarang. Jadi Anda dapat melihat bahwa ada definisi yang jelas (semoga ...;)) tentang apa yang terbaik untuk aplikasi Anda.

Meskipun demikian, Anda mungkin melihat proyek yang kompleks sebenarnya menggunakan pelari tugas dan bundler paket pada saat yang sama atau bersama-sama. Misalnya di kantor saya, kami menggunakan gulp untuk memulai proyek kami, dan webpack sebenarnya dijalankan dari tugas gulp tertentu yang membuat kumpulan sumber yang kami perlukan untuk menjalankan aplikasi kami di browser. Dan karena aplikasi kami isomorfik , kami juga menggabungkan beberapa kode server .

Menurut pendapat saya, Anda mungkin ingin mengenal semua teknologi ini karena kemungkinan besar Anda akan melihat (menggunakan) semuanya dalam perjalanan karier Anda.

Saya baru saja membuat runner / bundler tugas saya sendiri.

Ini lebih mudah digunakan daripada gulp dan mungkin webpack (meskipun saya belum pernah menggunakan webpack).

Ini sangat sederhana dan memiliki babel, browserify, uglify, minify, dan setang di luar kotak.

Sintaksnya terlihat seperti ini:

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);

Dan dokumennya ada di sini: https://github.com/lingtalfi/Autumn

Semoga membantu.