Biegacze zadań (Gulp, Grunt itp.) I Pakowacze (Webpack, Browserify). Dlaczego używać razem?

Jestem trochę nowy w świecie uruchamiania zadań i pakietów oraz podczas przechodzenia przez takie rzeczy

Grunt, Gulp, Webpack, Browserify

, Nie czułem, że jest między nimi duża różnica. Innymi słowy, czuję, że Webpack może zrobić wszystko, co robi runner zadań. Ale wciąż mam ogromne przykłady, w których gulp i webpack są używane razem. Nie mogłem zrozumieć, dlaczego.

Będąc nowicjuszem, mogę iść w złym kierunku. Byłoby wspaniale, gdybyś mógł wskazać, czego mi brakuje. Wszelkie przydatne linki są mile widziane.

Z góry dziękuję.

Grunt i Gulp to w rzeczywistości programy uruchamiające zadania i mają różnice, takie jak zadania sterowane konfiguracją i transformacje oparte na strumieniu. Każdy z nich ma swoje mocne i słabe strony, ale pod koniec dnia w dużym stopniu pomagają one tworzyć zadania, które można uruchomić, aby rozwiązać większy problem z kompilacją. W większości przypadków nie mają one nic wspólnego z faktycznym czasem wykonywania aplikacji, ale raczej przekształcają lub umieszczają pliki, konfiguracje i inne rzeczy w miejscu, aby czas wykonywania działał zgodnie z oczekiwaniami. Czasami nawet uruchamiają serwery lub inne procesy potrzebne do uruchomienia aplikacji.

Webpack i Browserify to pakiety pakietów. Zasadniczo są one zaprojektowane do działania przez wszystkie zależności pakietu i łączenia ich źródła w jeden plik, który (najlepiej) może być używany w przeglądarce. Są ważne dla współczesnego tworzenia stron internetowych, ponieważ używamy tak wielu bibliotek zaprojektowanych do działania z Node.js i kompilatorem v8 . Ponownie, istnieją zalety i wady oraz różne powody, dla których niektórzy programiści wolą jeden lub drugi (lub czasami oba!). Zazwyczaj pakiety wyjściowe tych rozwiązań zawierają pewnego rodzaju mechanizmy ładowania początkowego, które pomagają uzyskać dostęp do właściwego pliku lub modułu w potencjalnie ogromnym pakiecie.

Rozmyta linia między programami uruchamiającymi a pakietami może polegać na tym, że programy pakujące mogą również wykonywać złożone transformacje lub translacje w czasie ich działania, dzięki czemu mogą robić kilka rzeczy, które mogą wykonywać zadania uruchamiające. W rzeczywistości między browserify a webpackiem jest prawdopodobnie około setki transformatorów , których możesz użyć do zmodyfikowania kodu źródłowego. Dla porównania, obecnie na npm jest co najmniej 2000 wtyczek gulp . Możesz więc zobaczyć, że istnieją jasne (miejmy nadzieję ...;)) definicje tego, co najlepiej pasuje do Twojej aplikacji.

Biorąc to pod uwagę, możesz zobaczyć złożony projekt, który faktycznie używa zarówno programów uruchamiających zadania, jak i pakietów pakietów w tym samym czasie lub w tandemie. Na przykład w moim biurze używamy gulp do rozpoczęcia naszego projektu, a webpack jest w rzeczywistości uruchamiany z określonego zadania gulp, które tworzy pakiety źródłowe, których potrzebujemy, aby uruchomić naszą aplikację w przeglądarce. A ponieważ nasza aplikacja jest izomorficzna , dołączamy również część kodu serwera .

Moim skromnym zdaniem, możesz chcieć zapoznać się z wszystkimi tymi technologiami, ponieważ są szanse, że zobaczysz je (użyjesz) w trakcie swojej kariery.

Właśnie utworzyłem własny program uruchamiający / bundler zadań.

Jest prostszy w użyciu niż łyk i prawdopodobnie webpack (chociaż nigdy nie korzystałem z webpacka).

Jest bardzo prosty i ma po wyjęciu z pudełka babel, browserify, uglify, minify i kierownicę.

Składnia wygląda następująco:

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

Dokument jest tutaj: https://github.com/lingtalfi/Autumn

Mam nadzieję, że to pomoże.