Насколько хорошо необходимо знать Webpack и Gulp в web-разработке?

Question

[Rapen]

Всем привет.
Писал различные для себя на реакте велосипеды, и пришло время разрабатывать полноценные проекты, но за пределы dev-server'a от реакта пока не отошел, и не особо знаю собрать проект в продакшен и применять с ним всякие hot module replacement, попытался вникнуть в webpack, он сразу дал знать о своей сложности, также я полагаю и немаловажен Gulp, они могут делать общие вещи, но также говорят, что они предназначены для разных целей. И как их используют совместно?Когда нужно использовать Gulp и когда Webpack.Как сильно нужно заучивать Webpack для React-Redux, стоит ли начинать со 2 версии?

Comments

[Froggyweb]

Gulp простой как палка. Тупо можно писать сделай то , сделай это. Дальше уже оптимизация задач. Webpack собирает js вообще из коробки. Какие проблемы? А как вы собирали свои проекты на react или это был todo list

[Rapen]

Froggyweb: я через react-create-app, который давал готовый dev-server, т.е пишешь npm start и открывался проект текущей стадии разработки.

[Froggyweb]

Задача сборщиков скомпилировпть файлы в указанной директории, потом если надо обработать, затем результат скопировать в папку public.
В консоли пишешь gulp и он все делает и если надо открывает web server. C react плка не знаком но подправить конфиг заготовок под себя очень несложно

Answer 1

[Никита Гущин]

С react используется webpack в подавляющем большинстве случаев. Есть тонна готовых конфигов, которые можно просто скопипастить и все будет работать. Но в целом - в проекте вам может понадобится сделать что-то по другому и тогда возникают сложности. Поэтому для общего развития нужно хотя-бы поверхностно разбираться что там к чему (в идеале - попробовать такие фишки как tree shaking и code splitting).

Мой совет - для этого просто начните с нуля собирать проект. Подсматривайте готовые конфиги и постепенно собирайте свой, читая при этом документацию. При устройстве на работу будет однозначно плюсом, да и в собственной разработке не все же create-react-app'ом пользоваться.

PS а про gulp - не знаю, давно уже не приходилось его в живую использовать: все что нужно - может webpack

Comments

[Rapen]

А что на счет версий вебпака? Можно ли начинать со 2?Какие особенности у webpack с реактом и редаксом(к примеру: Hot Module Replacement)?

[Никита Гущин]

Rapen: даже нужно начинать со 2й. 1я уже устарела)

HMR - да, есть пара моментов по этой теме, но в целом - "одна из фич" вебпака

[Сергей delphinpro]

все что нужно - может webpack

всё что вам нужно, видимо.
Потому что webpack не может всего того, что можно намутить с гальпом.

[alvvi]

Rapen: нужно начинать со 2. HMR это не особенность работы с реактом per se, и по ней есть целый раздел в документации ко второму Webpack'у, где всее (ну почти) объясняется очень подробно. https://webpack.js.org/concepts/hot-module-replace...

[Rapen]

всем спасибо за ответ

[Islam Ibakaev]

Сергей: он имел ввиду webpack + npm scripts заменяют gulp

[Никита Гущин]

Сергей : я излагаю свой опыт и опыт коллег, с которыми работали на проектах (spa) последние 1.5 года.
Islam Ibakaev : да, вы правы - я не точно выразился... Gulp ведь в первую очередь таск раннер - и можно самые разные вещи запускать, вплоть до авто-деплоя и так далее, а вебпак - про сборку проекта из src.

[Islam Ibakaev]

Сергей:

все что нужно - может webpack

всё что вам нужно, видимо.
Потому что webpack не может всего того, что можно намутить с гальпом.

например?

[Сергей delphinpro]

Islam Ibakaev: да вон выше уже написан пример - "вплоть до деплоя". Вы меня затроллить решили? =)

[Islam Ibakaev]

Сергей: нет, я просвещаюсь, не более того

[Сергей delphinpro]

Islam Ibakaev: сорри

Answer 2

[Сергей delphinpro]

Webpack заморочен, а с переходом на вторую версию старые мануалы/курсы/скринкасты имеют неточности вроде бы в незначительных мелочах, а ведь не работает!
Но когда вы поймете как он работает, как его настроить, он станет вам незаменимым помощником. Использовать разумеется сразу вторую версию.
Отдельно webpack имеет смысл использовать для сборки SPA и только. Для верстки обычного сайта без помощи таск-менеджера вам не обойтись. И тут на сцену выходит простой и надежный gulp, который и изучать-то особо не надо (если вы конечно не полный чайник в javascript). Он вам и скрипты сбилдит, и стили скомпилирует, и картинки оптимизирует, и спрайты соберет... Список можно продолжать до бесконечности. Без преувеличения.
Более того, gulp может для вас и webpack запустить, если хочется обрабатывать javascript-файлы именно им. Они прекрасно дружат вместе.
И не нужно там ничего заучивать. Добавьте пару закладок на документацию в браузер, почитайте/посмотрите несколько уроков, чтобы понять как в принципе настраивать инструмент. Потом делайте себе конфиги, удачные сохраняйте и переиспользуйте, расширяйте.

Comments

[Islam Ibakaev]

gulp и webpack дружат - согласен. но зачем тащить gulp в проект, если в нём, откровенно говоря, нет необходимости (речь о SPA).
Возможно я ошибаюсь, но подскажите в каких случаях при разработке spa вам просто необходимо потащить в проект gulp?

p.s. насчёт того, что gulp незаменимая вещь при вёрстке сайтов - согласен на все сто.

[Сергей delphinpro]

Islam Ibakaev: Для SPA не нужен гальп. Я этого не писал =)

[Islam Ibakaev]

Сергей: а это?

Более того, gulp может для вас и webpack запустить, если хочется обрабатывать javascript-файлы именно им.

[Сергей delphinpro]

Islam Ibakaev: и что?
Чувак, заканчивай =) Просто внимательно перечитай всё. =)

[Сергей delphinpro]

раз ум мы говорим о взаимодействии gulp и webpack то речь идёт о написании spa.

Да почему сразу SPA, блин?
Вот у меня сейчас есть сайтик, обычный, не SPA. В нем есть раздел, в котором много джаваскрипта, разбитого на компоненты. Сборка фронта построена на гальпе, а js собирается как раз вебпаком.

Gulp-задача, если интересно

const bs            = require('browser-sync').get('ddd');
const gulp          = require('gulp');
const header        = require('gulp-header');
const filter        = require('gulp-filter');
const changed       = require('gulp-changed-in-place');
const webpack2      = require('webpack');
const webpackStream = require('webpack-stream');

const paths = {
    src : path.join(config.root.src, config.webpack.src, `/main.js`),
    dist: path.join(config.root.build, config.webpack.build)
};

let wpConfig = require('../webpack.config.js');

gulp.task('webpack', function () {

    let f = filter(['*.js'], {restore: true});

    return gulp.src(paths.src)
        .pipe(webpackStream(wpConfig, webpack2))
        .on('error', notify)
        .pipe(changed({firstPass: true}))
        .pipe(f)
        .pipe(header(config.header.js, {updated: (new Date()).toUTCString()}))
        .pipe(f.restore)
        .pipe(gulp.dest(paths.dist))
        .pipe(bs.stream())
});

Answer 3

[huwesu]

90% не знают.
Надо ли это вам - решать вам.

Comments

[Rapen]

90%, это те кто пишут c Angular или React? Не складывается, ибо с нулевым знаниями, как я уже говорил, за пределы dev-server'a и онлайн транспиляторов, ничего не получится

[huwesu]

Rapen:
уровень знания может быть ОЧЕНЬ РАЗНЫМ.

• Использовать готовую сборку - это одно.
  
• Уметь ее подкорректировать - это другое.
  
• Сделать самому - это третье.
  

[Артем]

за рамки dev-server'a и онлайн транспиляторов

Да ладно. Спокойно работаю без gulp и прочего в очень-higload-проекте. Даже (о ужас!) без github.
И ничего. Растем, развиваемся.

[huwesu]

Артем:

Да ладно. Спокойно работаю без gulp и прочего в очень-higload-проекте. Даже (о ужас!) без github.
И ничего. Растем, развиваемся.

Вы слукавили.
У вас не git, а mercurial просто
;)

[Олег Гамега]

Rapen: а как же create-react-app ? и ot reload и нормальный билд, пока полет нормальный, нареканий нет

Answer 4

[Артем]

Новомодные технологии лишь облегчают жизнь, не более того. Пользоваться ими совершенно необязательно.
С другой стороны - они неслабо так облегчают жизнь. И не так уж сложны в изучении.
Ну и на рынке труда эти модные словечки высоко ценятся.

Comments

[sim3x]

А сколько десятков лет нужно чтоб технология перестала считаться "новомодной"?