Исполнители задач (Gulp, Grunt и т. Д.) И Bundlers (Webpack, Browserify). Зачем использовать вместе?

Я немного новичок в мире задач и сборщиков, и пока я прохожу через такие вещи, как

Grunt, Gulp, Webpack, Browserify

, Я не чувствовал, что между ними есть большая разница. Другими словами, я чувствую, что Webpack может делать все, что делает средство выполнения задач. Но все же у меня есть огромное количество примеров, когда gulp и webpack используются вместе. Я не мог понять причину.

Поскольку я новичок в этом, возможно, я иду в неправильном направлении. Было бы здорово, если бы вы могли указать, чего мне не хватает. Приветствуются любые полезные ссылки.

Заранее спасибо.

Grunt и Gulp на самом деле являются исполнителями задач, и у них есть различия, такие как задачи, управляемые конфигурацией, и преобразования на основе потоков. У каждого есть свои сильные и слабые стороны, но, в конце концов, они в значительной степени помогают вам создавать задачи, которые можно запускать для решения более крупной проблемы сборки. В большинстве случаев они не имеют ничего общего с фактическим временем выполнения приложения, а скорее преобразуют или помещают файлы, конфигурации и другие вещи на место, чтобы время выполнения работало должным образом. Иногда они даже порождают серверы или другие процессы, необходимые для запуска вашего приложения.

Webpack и Browserify - это сборщики пакетов. По сути, они предназначены для обработки всех зависимостей пакета и объединения их исходного кода в один файл, который (в идеале) можно использовать в браузере. Они важны для современной веб-разработки, потому что мы используем очень много библиотек, предназначенных для работы с Node.js и компилятором v8 . Опять же, есть плюсы и минусы, а также разные причины, по которым некоторые разработчики предпочитают одно или другое (а иногда и то и другое!). Обычно выходные пакеты этих решений содержат какие-то механизмы начальной загрузки, которые помогут вам добраться до нужного файла или модуля в потенциально огромном пакете.

Размытая грань между исполнителями и сборщиками может заключаться в том, что сборщики также могут выполнять сложные преобразования или транспиляции во время выполнения, поэтому они могут делать несколько вещей, которые могут делать участники задач. Фактически, между browserify и webpack существует, вероятно, около сотни преобразователей, которые вы можете использовать для изменения исходного кода. Для сравнения, сейчас на npm указано не менее 2000 плагинов gulp . Итак, вы можете видеть, что есть четкие (надеюсь ...;)) определения того, что лучше всего подходит для вашего приложения.

При этом вы можете увидеть сложный проект, на самом деле использующий как исполнители задач, так и сборщики пакетов одновременно или в тандеме. Например, в моем офисе мы используем gulp для запуска нашего проекта, а webpack фактически запускается из конкретной задачи gulp, которая создает исходные пакеты, необходимые для запуска нашего приложения в браузере. А поскольку наше приложение изоморфно , мы также связываем часть серверного кода.

По моему скромному мнению, вы можете захотеть познакомиться со всеми этими технологиями, потому что есть вероятность, что вы увидите (будете использовать) их все в ходе своей карьеры.

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

Его проще использовать, чем gulp и, возможно, webpack (хотя я никогда не использовал webpack).

Это очень просто и имеет встроенные функции babel, browserify, uglify, minify и рули.

Синтаксис выглядит так:

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/Autumn

Надеюсь, это поможет.