Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 31
Надо бы начинать с nvm и .nvmrc файла.
как будто вернулся на 4-5 лет назад). Для сборки клиента есть webpack или различные cli. Gulp лучше применять там, где заканчивается зона действия сборщика клиента
Очень хочу перейти с gulp на webpack, но не могу, потому что очень сложно. Буду рад, если на Habr появится статья, аналогичная этой, но про webpack.
Мне помогли вот эти видео. Дальше стало интуитивно понятно.
Рекомендую попробовать Parcel. Он по умолчанию zero-configuration. Я перешёл, и вот уже полгода как полёт нормальный.
Если я правильно помню, parcel использует как точку входа html-файл. Я не понял, как можно прикрутить его к сайту на php. Мне нужно, чтобы сборщик просто собирал css и js, не требуя обязательного присутствия html. Есть ли какие-то best practices на эту тему для parcel?
Точкой входа может быть js-файл. В документации есть примеры.
Там дело не в сложности, а в совсем другом подходе и в документации для тех кто уже знает как оно работает и хочет нюансы посмотреть, а так с ходу даже не понятно «куда коней запрягать».
Я в своё время смотрел видео Ильи Кантора, однако API уже несколько раз менялся и в деталях будут отличия. Поэтому если другие видео, которые советуют — подходят и они свежее, то лучше наверное их смотреть.
youtu.be/kLMjOd-x0aQ
Я в своё время смотрел видео Ильи Кантора, однако API уже несколько раз менялся и в деталях будут отличия. Поэтому если другие видео, которые советуют — подходят и они свежее, то лучше наверное их смотреть.
youtu.be/kLMjOd-x0aQ
Rollup проще чем webpack, попробуйте с него. Количество строк конфигурации в разы меньше, а делает тоже самое… На примере проекта на vue.js: github.com/sergeyfilimonov/vue-youtube/blob/master/build/build.js
Можно узнать чем Webpack (сборщик фронта) лучше Gulp (менеджер задач) в задачах которые автор упомянул в статье?
Судя по gulp-задачам предположу, что рабочий процесс команды автора подразумевает выдачу статичного фронта. В который потом интегрируют бэкэнд.
На мое мнение, стоит все таки начать с простого для понимания (новичками) Gulp.
Таким образом новичок будет настраивать/учиться с Gulp в разрезе терминов:
— принцип единственной ответственности;
— сборщика проекта;
— таск менеджера.
Новичок сможет сделать сборщик фронта на Gulp, но он не сможет сделать менеджер задач на Webpack, потому что работая с Webpack вы учитесь работе с Webpack (тут я немного утрирую, каюсь, но 90% функционала Webpack все таки связанна с бандлингом js).
Я последние лет 5 использую Gulp (все кроме js). Для сборки js Rollup.
Судя по gulp-задачам предположу, что рабочий процесс команды автора подразумевает выдачу статичного фронта. В который потом интегрируют бэкэнд.
На мое мнение, стоит все таки начать с простого для понимания (новичками) Gulp.
Таким образом новичок будет настраивать/учиться с Gulp в разрезе терминов:
— принцип единственной ответственности;
— сборщика проекта;
— таск менеджера.
Новичок сможет сделать сборщик фронта на Gulp, но он не сможет сделать менеджер задач на Webpack, потому что работая с Webpack вы учитесь работе с Webpack (тут я немного утрирую, каюсь, но 90% функционала Webpack все таки связанна с бандлингом js).
Я последние лет 5 использую Gulp (все кроме js). Для сборки js Rollup.
Gulp не умеет в nesting, а это основа и суть webpack.
Это как сравнивать вилку и ветер.
Gulp универсальный инструмент и с помощью вызываемых расширений можно получить сходный с Webpack результат. Однако Webpack вообще про другое, про то, что в случае импорта, загрузки картинки через img src= и.т.д. — давайте применять такие лоадеры, а в других каких-то случаях другие. И он как вы заметили вообще ниразу не менеджер задач. Некоторые используют Вебпак вместе с Gulp в качестве менеджера задач. Для моих персональных и рабочих нужд достаточно npm скриптов, чтобы покрыть все необходимые кейсы.
Gulp универсальный инструмент и с помощью вызываемых расширений можно получить сходный с Webpack результат. Однако Webpack вообще про другое, про то, что в случае импорта, загрузки картинки через img src= и.т.д. — давайте применять такие лоадеры, а в других каких-то случаях другие. И он как вы заметили вообще ниразу не менеджер задач. Некоторые используют Вебпак вместе с Gulp в качестве менеджера задач. Для моих персональных и рабочих нужд достаточно npm скриптов, чтобы покрыть все необходимые кейсы.
Мы в команде использует Gulp для сборки верстки из того же Pug,ES6,SCSS, бандлинг на Rollup добавил я (есть проекты на Vue.js/React). Написана сборка универсальная, которая подходит для всех проектов плюс/минус дописываются отдельные таски под нужны проекта (кастомные) и все.
И ничего не тормозит? У меня разработка сайта была 6-7 страниц, некоторое количество jquery кода, все кэшировалось. Но вот уже к финалу верстки после ctrl+s успеваешь альтабнуться в браузер еще пару секунд подождать прежде чем страница обновиться.
Мы полностью ушли от использования jQuery, только vanilla js (ES6) и отдельный спец занимается тестированием верстки в Lighthouse и Playwright взяли на вооружение недавно. «Тормозит» значит неверно подключены скрипты или неоптимальная стратегия сборки и оптимизации бандлов и стилей. Сейчас множество механизмов preload, prefetch, lazy-loading и тд
Да возможно не оптимизированы фото. У нас сборщик использует возможности библиотеки imgmin и так же конвертирует все в webp, подключена «ленивая» загрузка через IntersectionObserver, спрайты из svg (gulp-svgstore) и тд
Прекоммит хуки это зло, ну или, карго-культ, если хотите. Позволю себе оставить ссылку на свои мысли почему это так.
Путаете народ ). gulp библиотека широко профиля чем webpack. Например предлагает манипуляции с git. webpack заточен чисто под сборку фронтенд кода, 95% необходимых задач закрывает и не только es модулей).
Мне интересно как это gulp делает минификацию и прочее сам по себе). Там необходимо вызывать соотвествующие обработчики, которые по сути аналоги лодеров.
Насчет производительности gulp или webpack ничего сказать не могу(не тестил и не изучал), но собирать фронтенд на webpack в разы приятнее и необязательно SPA)
Мне интересно как это gulp делает минификацию и прочее сам по себе). Там необходимо вызывать соотвествующие обработчики, которые по сути аналоги лодеров.
Насчет производительности gulp или webpack ничего сказать не могу(не тестил и не изучал), но собирать фронтенд на webpack в разы приятнее и необязательно SPA)
Я довольно долго пользовался Gulp, практически с момента его появления. Но что-то не припомню, чтобы там можно было стили грузить хочешь инлайн, хочешь как js, а хочешь отдельными файлами css.
Делал так же svg-спрайты, но есть косяк, safari кропает иконку с дробным значением width: 1.234em;. Причем если их несколько(список элементов с одинаковой иконкой), то кропает последние. Если задавать только высоту, то ширина тянется как у display:block;, это не фиксится сменой свойства display. Исправить положение можно округлением значения ширины, до десятой доли с помощью sass функции гист. Но не уверен что во всех случаях поможет.
Забавно, сделал себе для простых проектов нечто похожее https://github.com/chekit/generator-basic-page, во многом наши решения похожи. :)
Смотрю, что у многих возникает вопрос уровня Android vs iOs, Windows vs Linux.
Скажу одно — пока вы не попробуете и то, и то на одной и той же задаче, то не поймете разницы. И задача должна быть не уровня «сверстать лендинг» или набросать страницы в паге и собрать воедино.
Вы попробуйте обвеситься линтингом или тестить код хотя бы на уровне установки переменных сред Node.js. И то, и то, можно делать в и там, и там, но в ходе практики окончательно слез с гальпа.
Пока вы смотрите и на гальп и на вебпак в разрезе конкатенации файлов и перекладывании файлов из src, в dist, то однозначно вам подойдет gulp и вебпак излишен:)
Скажу одно — пока вы не попробуете и то, и то на одной и той же задаче, то не поймете разницы. И задача должна быть не уровня «сверстать лендинг» или набросать страницы в паге и собрать воедино.
Вы попробуйте обвеситься линтингом или тестить код хотя бы на уровне установки переменных сред Node.js. И то, и то, можно делать в и там, и там, но в ходе практики окончательно слез с гальпа.
Пока вы смотрите и на гальп и на вебпак в разрезе конкатенации файлов и перекладывании файлов из src, в dist, то однозначно вам подойдет gulp и вебпак излишен:)
Gulp — это просто таск менеджер, который берет другие инструменты (Babel, node-sass, Pug, webpack/Rollup) и собирает статику, согласно вашей логике. Не надо сравнивать его непосредственными бандлерами Webpack/Rollup/Parcel/Fusebox/JSPM/Poi и другими. Выше уже писал — Gulp сам «ничего» не делает.
Не так давно тоже решил обновить свою gulp сборку, в итоге получилась смесь gulp+webpack, если кому вдруг будет интересно, посмотреть можно тут.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Современная сборка 2020 для frontend. Gulp4