Робочі завдань (Gulp, Grunt тощо) та Bundlers (Webpack, Browserify). Навіщо використовувати разом?

Я трохи новачок у світі, який виконує завдання та постачальники, і переживаю такі речі

Grunt, Gulp, Webpack, Browserify

, Я не відчував, що між ними є велика різниця. Іншими словами, я вважаю, що Webpack може зробити все, що робить виконавець завдань. Але все ж я отримав величезний приклад, коли gulp та webpack використовуються разом. Я не міг з'ясувати причину.

Будучи новим у цьому, я можу сприймати речі в неправильному напрямку. Буде чудово, якщо ви зможете вказати на те, що я пропускаю. Будь-які корисні посилання вітаються.

Заздалегідь спасибі.

Grunt та Gulp - це фактично виконавці завдань, і вони мають відмінності, як задачі, керовані конфігурацією, та перетворення на основі потоку. У кожного є свої сильні та слабкі сторони, але наприкінці дня вони в значній мірі допомагають вам створювати завдання, які можна виконати для вирішення більшої проблеми складання. Більшу частину часу вони не мають нічого спільного з фактичним часом роботи програми, а скоріше вони перетворюють або ставлять файли, конфігурації та інші речі на місце, щоб час роботи працював так, як очікувалося. Іноді вони навіть нерестують сервери чи інші процеси, необхідні для запуску програми.

Webpack і Browrify є постачальниками пакетів. В основному вони розроблені для проходження всіх залежностей пакету і об'єднання їх джерела в один файл, який (в ідеалі) може бути використаний у браузері. Вони важливі для сучасної веб-розробки, оскільки ми використовуємо так багато бібліотек, які розроблені для роботи з Node.js та компілятором v8 . Знову ж таки, є плюси і мінуси, і різні причини деякі розробники віддають перевагу тому чи іншому (а іноді і обом!). Зазвичай вихідні пакети цих рішень містять певні механізми завантаження, які допоможуть вам дійти до потрібного файлу чи модуля в потенційно величезному пакеті.

Розмита лінія між бігунами та розмножувачами може полягати в тому, що пачки також можуть робити складні перетворення або транспіляції під час виконання, тому вони можуть робити кілька речей, які можуть зробити бігуни із завданнями. Насправді, між браузером і веб-пакетом, мабуть, є близько сотні трансформаторів, які можна використовувати для зміни свого вихідного коду. Для порівняння, є щонайменше 2000 плагінів gulp, перелічених зараз у npm . Тож ви можете бачити, що є чіткі (сподіваємось ...;)) визначення того, що найкраще підходить для вашої програми.

Якщо говорити, то, можливо, ви побачите складний проект, який фактично використовує одночасно або в тандемі як виконавців завдань, так і пакетних пакетів. Наприклад, у моєму кабінеті ми використовуємо gulp для запуску нашого проекту, а webpack насправді виконується з конкретної задачі gulp, яка створює вихідні пакети, які нам потрібні для запуску програми у браузері. Оскільки наш додаток ізоморфний , ми також поєднуємо частину коду сервера .

На мою скромну думку, ви, можливо, захочете ознайомитись із усіма цими технологіями, оскільки, швидше за все, ви побачите (використаєте) їх у процесі своєї кар’єри.

Я щойно створив власний виконавець завдань / постачальник завдань.

Це простіше у використанні, ніж gulp та, ймовірно, webpack (хоча я ніколи не використовував webpack).

Це дуже просто, з коробкою ви можете переглядати, переглядати, зменшувати, мінімізувати та ручки.

Синтаксис виглядає приблизно так:

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

І документ тут: https://github.com/lingtalfi/Осінь

Сподіваємось, це допомагає.