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