Что такое Taskrunner и Bundler? Что такое gulp и зачем он нужен. Установка Gulp 4
HTML-код
- Опубликовано: 2 окт 2024
- В этом видео разбираемся с тем, что такое таск-раннер (task-runner) и бандлер (bundler), а так же на примере Gulp 4, последней версии на данный момент, делаем установку и пишем несколько задач.
Здравствуйте, друзья. Мы продолжаем публиковать уроки веб программирования. Я думаю, вы уже знаете, что такое фронтенд и бэкенд разработка. Имеете понимание про создание сайта верстка и разделяете этапы верстки сайта. Сейчас я вам расскажу, что такое Taskrunner (Таскраннер.) Разберем, что такое gulp и зачем он нужен. Как с ним работать, как установить gulp, как настроить gulp 4 и что такое gulp верстка. В общем разберем все вопросы связанные с gulp 4 для начинающих. В ссылках в описании найдете gulp 4 инструкция. Если вам будет интересно узнать больше - пишите в комментарии, возможно мы сделаем gulp 4 уроки,
=======================================
Node.js - nodejs.org
=======================================
Бандлеры и таскраннеры:
Gulp - gulpjs.com/
Grunt - gruntjs.com/
Broccoli - github.com/bro...
Webpack - webpack.js.org/
Parcel - parceljs.org
Rollup - rollupjs.org/
Brunch - brunch.io/
Не забудьте заглянуть сюда:
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
I know I am kinda off topic but does anyone know a good place to watch new movies online ?
@Felix Deshawn I watch on flixzone. Just google for it =)
@Felix Deshawn I would suggest FlixZone. Just google for it =)
Хорошо, что объясняешь, как для школьников, иногда хочется подучиться на релаксе 🙂
ЕДИНСТВЕННЫЙ .Ты единственный кто помог. -интернета слишком много инфы с примесью говна
Рад слышать)
Очень понятные ролики, которые позволяют обычному пользователю накидать уже несколько рабочих строк кода. При изучении нового всегда не хватает такого подробного материала. Просто круто, надеюсь, у вас есть какая-то долгая тактика развития уроков и вы ее придерживаетесь
Виталий, ты мега чувак! Ты настолько понятно и информативно показываешь сложные вещи))) Спасибо тебе! Продолжай в том же формате выпускать новые видосы)
Спасибо -)
Это одно из лучших обучающих видео по данной теме. Спасибо Вам!
Автор объясняет очень доходчиво, без воды и в мелочах. Великолепно. Заинтересован даже перейти посмотреть, что там еще на канале.
боже, убила на это весь день. Несложно, но теряешься и из-за этого мелкие ошибки, недопонимания(т.к материал новый). Все с опытом, все с опытом...
Спасибо за урок!)
этеншен , gulp-sass обновился , потому стоит изменить строку в файле gulpfile.js -
var sass = require('gulp-sass')(require('sass'));.
, а так все работает))
сделал все так, как вы посоветовали...но при вводе в терминале gulp style выдает ошибку. В чем может быть еще проблема ? буду благодарен за ответ
Лысый ты оч крут!))
Очень уважаю технически крутых людей, которые делятся опытом, однако не могу потролить не сказав, что канал можно было назвать "Лысый с ютуба" и все бы запомнили ))
@@kobetsmatviy уже есть лысый из браузера.
Просто економия часов работы, спасибо!))
Спасибо вам Виталий за работу !
очень интересно)
Благодарю)
Просто шикарно, без лишних слов:DDD
Спасибо большое за урок
Ребята, плагин gulp-sass обновился до 5 версии, из-за этого может выдавать ошибку на этапе gulp style. Сделайте следующее:
Дополнительно установите пакет sass
npm i sass --save-dev
И заменитe способ подключения
с
const scss = require('gulp-sass');
на
const scss = require('gulp-sass')(require('sass'));
Спасибо!
Пожалуйста! Рад помочь)@@lagec
*Исполнил всю эту ютубовскую шаурму: расписался, поставил лоу-кик и 2 коммента влепил*
Но и обновлять HTML страницу тоже лень!!! Посмеялся от души!!!
Ну да жеж!))
Для тех, у кого WIN10 и после установки нельзя проверить gulp -v, надо в powershell от админа убрать ограничение коммандой:
Set-ExecutionPolicy RemoteSigned
Спасибо большое за комментарий,столкнулся с этой проблемой,теперь все четко. Спасибо еще раз!
Спасибо тебе , очень помог !
Реально помог :)
Реально помогло. Спасибо!
Ну справедливости ради можно было сперва выпустить ролики которые бы подводили к использованию данных программ в проекте, а потом уже показывать как ими пользоваться, а так получается что если человек идёт от первого ролика то наверное он не поймёт зачем это ему и как это использовать. По крайней мере у меня так случилось.
Хотя я слишком рано начал жаловаться. В конце более менее стало понятно что к чему, просто на 10 минуте я поплыл совсем и не понимал для чего мы это делаем, тем более ещё и с JS начали баловаться, а я только 2-3 недели знакомлюсь с HTML и CSS.
Но когда мне понадобится использовать всё это я обязательно пересмотрю ролик)
Это просто пушка !!!!
Добавлю, что версию ноды ставим LTS, после установки ноды перезагружаем редактор кода.
Славные ролики, однако, мелковаты шрифты для показа. Не аксэсэбл для слабовидящих))
Спасибо за качественное видео Виталий Вопрос , подскажите browser-sync можно же заменить live server , ведь на сколько я понял он сразу показывает изменинея в коде . Или какие-то есть приумущества при вашем использовании добавления по npm ? Знание спасибо.
Проверил, можно.
Виталик, как по мне то для новичков метод использования Sass далеко не самый легкий. Не легче ли в VSCode установив расширение Sass создавать файл style.scss в папке где будет потом лежать непосредственно файл стилей и нажать Watching Sass в VSC?
В видео слышу предложение добавляться в Telegram. А ссылки на группу нет. Не порядок))
Telegram
Канал - t.me/prostorazrabotka
Чат - t.me/prostorazrabotkachat
Виталий очень крут, всегда помогает в чатах в телеграм! Про один из них он упомянул в этом видео: @css_ru приходите, я создал). Там старички помогают новичкам! Всегда бесплатно и без рекламы(если сообщество не проголосует иначе)
Виталь, да какие там могут быть сложности? Ты настолько хорошо объясняешь, что там ребенок это все выучит и пойдет программистом в Google работать)
То чувство, когда понял материал за 30 минут, когда до этого, пару дней копался в официальной документации и дико тупил. Большое спасибо.
Мужик, ты лучший! Я уже думал что никто не сможет мне это объяснить, продолжай в том же духе!
Благодарю
спасибо за видео. Но, если в vs code есть live server, получается в browser-sync смысла нет?
Live server ведь часто крашиться
Привет. при запуске gulp watch, browserSync в браузере пишет Cannnot GET /... что это может быть и как с этим бороться? Спасибо за контент :)
+плагин Save Typing и тогда даже сохранять не надо
@@DenShustrik сохраняет после каждого изменения,
Любой символ
В VS Code из коробки есть автосохранение
@@DenysSyned-p4x так в vs code из коробки есть и авто компилятор из sass в css и сервер тоже есть
О чистый код, спасибо за видео, 2 дня ушло на подготовку галпа, так как не мог понять в чем причине ненахода, но всё же, понял в чем заключается работа галп, и закончил пошаговую инстукцию видео
Понравилось. Видео мотивирует навести порядок в своём gulp файле и использовать встроенную консоль в VSCode.
Интересно узнать от тебя, как настроить папку node_modules одну для всех проектов? Сам делаю через создание символьной ссылки, которую раскидываю по всем папкам проектов. Но может быть есть способ лучше?
Вопрос для знатоков: У нас есть видео 16x9, в которое надо вставить видео 14x9. Что будем делать:
a) Растянем видео по ширине, обрезав бесполезную панель мака внизу. (потеряем разрешение, и возможность похвастаться маком)
б) Переснимем видео в нормальном формате (потратим кучу времени)
в) Добавим по бокам полосы, соответствующие цвету контента, а именно тёмно-серые.
г) Добавим по бокам полосы, но покрасим их в максимально контрастный к контенту цвет - белый, чтобы было максимально некомфортно смотреть.
Что же выбрать. Даже не знаю…
Я вообще не шарю но либо Б либо В зависит от свободного времени
Огромное спасибо! очень полезно!
У пользователей Windows возможно будет SecureError, винда будет жаловаться на команду gulp style. Надо будет менять политику выполнения команд в терминале.
Если что вот Команды которые мне помогли.
Get-ExecutivePolicy -list Для вывода параметров выполнения команд.
Get-ExecutivePolicy Scope -CurrentUser Для изменения параметров выполнения команд под удаленной подписью. походу админ права для терминала vs code.
Подробнее на about_execution_policies по ссылке
docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7
no gulp file found сохранил файл и все равно вылазит этот геморой
надо extension powershell на vs code поставить
Класс! Какой полезный канал! просто находка)
webpack это бандлер и он сборщик . ТАк почему gulp называют сборщик ? ( и ты тоже )
Сколько не задавал там вопросов, ни кто не ответили, такое чувство там тусняк для своих собрался!
Виталий - большущее спасибо за видео! Много видел уроков и статей по теме Gulp, но в большинстве своём они или устаревшие или не адекватные, хорошо что поискал на твоём канале, премного благодарен.
ну в итоге тема не раскрыта а пол часа потратил. Эх походу научусь и сам запишу уроки. Вот как специально по кусочкам информацию даете. Неужели нельзя было показать боевую обстановку с лайв-релоадами и реалтаймсевами кода? Ну и так далее.
Огромное Вам СПАСИБО! Вы - супер учитель!!!
С телефона когда смотрю, очень мелкий код, ничего не видно или тяжело разобрать
А зачем тогда нам live compiler sass?
Очень помогло видео! Спасибо большое!
🙌🏻
exports.style = style ненаходиться в терминале, в чем проблема может быть?
Не могу видеть что пишешь на Vs code. Сделай zoom пожалуйста🙏🏻🙏🏻🙏🏻
VScode: льзя
Господе, я не знаю каким образом, но все очень доходчиво сделано и объяснено. Ошибки были, но там как правило пишется в самом терминали где косяк, можно разобраться. Итог : создал проект, сделал свой gulpfile.js - Огонь!)
Круто!)
Оч круто молодец! Продолжай!
При попытке запустить команду gulp style выдает следующее [21:13:22] The following tasks did not complete: style
[21:13:22] Did you forget to signal async completion? Что делать?
Настроил по этому гайду аналогично pug, browserSync, autoprefixer, sourcemaps. Теперь галпом приятно пользоваться из терминала VSCode. И даже Prepros больше не нужен.
Не могу понять почему не создается папка css, после выполения экспорта.
Вот код:
const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
function style () {
return gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
}
exports.style = style;
вот ответ терминала:
MBP-Roman:my-project romandolzenkov$ gulp style
[21:34:33] Using gulpfile ~/Desktop/TT Project/my-project/gulpfile.js
[21:34:33] Starting 'style'...
[21:34:33] Finished 'style' after 19 ms
Надо было чайку попить, и все встало на свои места)
рабочая тема -)
@@prosto_razrabotka Виталий, спасибо за твой канал, информация очень помогает разобраться в освещаемых вопросах! Не останавливайся! И еще раз спасибо!
Блин, та же проблема, не могу понять в чем дело
npm WARN deprecated resolve-url@0.2.1: github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see github.com/lydell/urix#deprecated
Это критичные ошибки? Выдает при "npm i gulp-cli -g" ?
При установки gulp-sass возникает ошибка(gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.) в чем может быть проблема?
Вы скорее всего на Windows устанавливаете. Попробуйте сделать, как написано тут - catalin.me/how-to-fix-node-js-gyp-err-cant-find-python-executable-python-on-windows/
Все хорошо, но мелковато, ибо не у всех мониторы 32 дюйма
Никто случайно не сталкивался с такой проблемой, после установке gulp gulp-sass browser-sync sublime-text 3 постоянно выдает ошибку и прекращает работу.
Ничего не понятно но очень интересно.
ну почему всех комфортно смотреть только на х2 скорости. ИТ сообщество ну делайте уже как у Sorax ролики. Лучше не успевать и пересмотреть чем сидеть и слушать бе ме
У меня такое (Ubuntu 18.04)
[09:51:52] Using gulpfile ~/Стільниця/gulp-project/gulpfile.js
/usr/lib/nodejs/gulp/bin/gulp.js:132
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /usr/lib/nodejs/gulp/bin/gulp.js:132:20
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
Если у когото будет такое:
- переустановить gulp (проверить что б версия не ниже 4.0.0
здравствуйте спасибо за видео но на последнем этапе не работает автообновлениме страницы браузера хоть и пишет что обновляеться
люблю себя сам нашел гайд сам написал сам натупил сам запорол сам нашел решение сам исправил сам ошибся сам запорол сам нашел ошибку сам исправил...идем дальше))
Привет, а если у меня новый проект, то что туда скопировать? Галп файл и package.json ? и выполнить команду npm i верно? был же комент об этом внизу и не могу его найти(
Да, все так
Отличное видео, коротко и по теме!
По шаблону ватчер не отрабатывал изменения HTML, всё решилось добавкой строки ghostMode: false
function watch () {
browserSync.init({
server: {
baseDir: './'
},
ghostMode: false
});
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./scss/**/*.scss', style);
}
Это на linuxmint) Вдруг поможет кому
Спасибо! Крутой канал. Все ждут продолжения и развития канала
Крутой урок, но у меня вопрос, после вёрстки и сдачи проекта папка node modules и файлы gulp и Json удаляются?
Kadetov VideoDesign gulp и json отдаются в папке проекта клиенту. Нод модули предварительно удаляются
@@prosto_razrabotka спасибо за ответ) Планируете вёрстку реальных проектов продемонстрировать? Что бы сложилось ощущение как все устроено там у вас)
Спасибо большое за труд!
а зачем экспортировать каждую функцию? они и так будут работать если написать gulp style или gulp watch в терминале?
Здравствуйте, а почему сразу не создать .CSS файл? И расскажите подробнее про то где должна располагаться папка style.css, что бы программа понимала такой путь CSS/style.css ?
Спасибо большое. У меня такой вопрос. Есть проект на nodeJs, я хочу подключить Gulp, но в проекте есть 2 файла, АПИ и основной файл. api.js и project.js, каждый на своем порту. Как запустит оба файла и чтобы browserSync запустил основной файл? или такое не возможно. сейчас я запускаю это так killall -9 node&&node api.js&&node project.js
Была ошибка при запуске команды gulp watch.
На linux решилась прописыванием команды echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p в строке. В остальном все отлично. Единственное хотелось бы узнать. Есть некий простенький сервер на django, можно ли средствами gulp подключиться к нему и
релоадить браузер при изменении статических файлов?
Ребята остановитесь) Я понимаю как все делается, грубым языком архив с путями и декодером на ftp. Но зачем? Фронт-энд почти 10 лет, объясни динозавру нахера так усложнять жизнь, да окей 1 строка кода, но фаст эдит мягко говоря такой себе, да и не только он. Да машина не отрабатывает "лишний код", но блин это реально того стоит?
Спасибо большое за объяснение! Все прояснилось, только после ваших роликов. Что-куда-зачем.
750-й Like )))
спасибо за простое и подробное видео: теперь у меня есть базовая заготовка, что для новичка очень полезно и удобно
конечно же не будет лишним разобраться с JavaScript'ом в принципе и применительно к данному уроку в частности - это задача на самое ближайшее время
Ребят, как в эту сборку ещё и autoprefixer вставить ?
Terminal: ne zagrujaet posledniy zadavha gulp style. Chto delat
Проблемы возникают когда после продолжительного перерыва хочешь вырнутся к старому проекту и сборка из-за различных обновлений в зависимостях просто не собирается. Как с этим быть? Пока в голову приходит просто переписать gulpfile.js с нуля
Полезное видео, Спасибо!
Подскажите почему на 19:40 gulp style??????
выдает ошибку и не хочет запускаться
const gulp = require('gulp');
const gulp = require('gulp-sass');
const browserSyns = require('browser-syns');
function style () {
return gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
}
exports.style = style;
может такой директории нет? создал папку scss с файлом?
Огромное спасибо! Вы очень хорошо объясняете, но вот только размер шрифта маловат, и пришлось щуриться(
А Live Server не сможет с scss работать?
Отличная подача материала! Реально полезные ролики)
Что именно нужно записывать в baseDir?
Привет! Спасибо очень полезный ролик, походу ты один из немногих кто по человечески осветил эту тему.
У меня все работает, но как только я сменяю цвет шрифта или тому подобное в SCSS gulp выдает такую ошибку
[Browsersync] Serving files from: ./
[Browsersync] Reloading Browsers...
[17:43:17] Starting 'style'...
[17:43:17] 'style' errored after 11 ms
[17:43:17] TypeError: gulp.src(...).pipe(...).pipe(...).pipre is not a function
at style (D:\Верстка\Тест_проект3\gulpfile.js:9:10)
at bound (domain.js:426:14)
at runBound (domain.js:439:12)
at asyncRunner (D:\Верстка\Тест_проект3
ode_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:79:11)
с чем это может быть связано?? при первом запуске gulp wathc все ок- затем эта проблема. приходится заново прерывать-запускать gulp watсh (работаю в PHPstorm)
Вам же пишут - pipre - не функция. Внимательней переписывайте
А с чем может быть связано, что после выполнения команды gulp watch открывается Edge, а не Хром, который по умолчанию? Ну соответственно мгновенные изменения видны только в edge
Возможно в винде браузер по умолчанию выбран Edge.
Есть у кого-нибудь ссылка на данную сборку?
Добрый день Виталий. В VS Code есть функция автосохранения файлов с определенной задержкой. Не проще активировать ее, а не сохранять вручную каждый раз файлы после внесения изменений? И было бы очень интересно услышать про подходы, альтернативные БЭМ (один из Ваших комментариев, "Но она не будет связана с БЭМом. Я предпочитаю иные подходы.")
Не во всех программах есть опция автосохранения, поэтому, как по мне, лучше выработать эту привычку самостоятельно.
Про подходы будет, но когда не знаю. Но если вам очень интересно, можете почитать про OOCSS, ITCSS, ACSS, SMACSS
А чем это отличается от расширения для VScode? Вроде тоже самое...
Вообще не понятно зачем такой гемор! Я установил расширения. И все так же работает, только без танцев с бубном! )))
@@braind_bible4845, да я разве против, что бы вы использовали всю эту хрень! Используйте на здоровье! ). Лично мне хватает VScode, решать нужное мне количество задач. )
а не легче копировать package.json и потом просто командой npm i устанавливать все пакеты. Мне казалось этот файл для того и нужен)
Зависит от проекта. Если клепаешь сайтики (вёрстку) и делаешь только конвертацию, сборку и по мелочам, то можно копировать. Но на больших проектах кол-во модулей в итоге разрастается и сложно вычищать потом от лишнего.
Привет, такой вопрос, у меня из командной строки все ставится в какую-то левую папку C/users/homе. Как то можно изменить адресную строку в командной строке, чтоб все ставилось в нужную папку (gulp-project) или можно просто вручную переместить потом эти джейсоны ноуд модулс... в свою папку?
Из какой «левой» папки запускаете, туда и ставится.
@@prosto_razrabotka хм, логично, но я просто нажал win R ввел cmd и там уже все как было так и было в адресной строке..и изменить нельзя.. вот, то есть или там все оставить или вручную переносить, незнаю, чтоб все норм работало потом.. может глупые вопросы задаю, но что поделать.
Это терминал. Гуглите Команды терминала. Там вы найдёте команду cd - переход в папку, и другие.
@@prosto_razrabotka Не стал париться с командной строкой, поставил ВС код - и правильно сделал, классный редактор кода, сразу на него перешел, незнаю че на всех курсах учат на Саблайме..
Добрый день! при запуске команды gulp style выдает следующее:
PS C:\Users\andre\OneDrive\Рабочий стол\gulp-project> gulp style
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'browser-sync'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (C:\Users\andre\OneDrive\Рабочий стол\gulp-project\gulpfile.js:3:21)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
Win 10. Node.js пробовал переустановить, начинал проект заново. Ничего не помогает. Подскажите как быть? Загуглил полностью эту ошибку, есть варианты очистить кэш ноды и убрать из окружения. Также парный TEMP удалить. Но все не увенчалось успехом.
Вот мой код:
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
function style () {
return gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
}
exports.style = style;
Разобрался в телеграмм канале по Вашей рекомендации. Спасибо кстати за уроки!
@@АндрейНеумыванный-м2з подскажите способ решения пожалуйста
Спасибо, всё получилось!!!!)))
а что нибудь посложнее будет?
например сборка gulp для БЭМ структуры, затронуть настройку наследования и т.д
Более сложная сборка - скорее всего да, причём скоро. Но она не будет связана с БЭМом. Я предпочитаю иные подходы.
Не сподобався Gulp, багато чого зайвого треба друкувати, краще вручну розробляти. 🙂
а зачем browser sync, если есть live server от vsc?
Зачем GIT, если можно копировать папки и в названии добавлять номер версии?
спасибо
Привет, возник вопрос: как пофиксить ошибку "gulp : Невозможно загрузить файл C:\Users\user\AppData\Roaming
pm\gulp.ps1, так как выполнение сценариев отключено в этой системе."
Эффективней будет, если задавать подобные вопросы в чате в телеге.
у меня та же фигня((, не знаю, мож в винде чтото отключено и недает, щас в телегу зайду спрошу.
@@Harrogath12 если что-я нашел решение проблемы
winnote.ru/security/160-windows-powershell.-vypolnenie-scenariev-otklyucheno-v-etoy-sisteme.html
@@АнтонРудь-н3ы да, я уже пошел по этому пути, слушай, а потом можно обратно вкючить этот ПауэрШелл? (я так понял это защита в винде там, просто дальше там этот стайл должен постоянно выполняться в галпфайле и я боюсь что если включу обратно этот пауэршелл, то конвертиться перестанет scss)
@@Harrogath12 когда перестаешь работать с проектом - включай пауэршел
Интересен конфиг с gulp + webpack для многостраничного сайта и в качестве html-шаблонизатора использовать nunjucks. Или может хватит одного webpack'а для создания многостраничника с генерацией svg спрайтов для иконок, сжатием картинок?
Шаблонизатор это конечно интересно. Наверное. Хоть я ими никогда плотно и не пользовался... Только при настройке вам надо учитывать ещё препрецессоры, js и тп. А генерация и сжатие - это модули, которые можно запустить что там, что там...
@@prosto_razrabotka я использую nunjucks, очень удобная штука, импорты, циклы, функции и т.д.. Почти как php. Какое видео про вёрстку не посмотри, везде всё пишут в один файл стилей, повторяющийся код html просто копируется. Хотелось бы посмотреть разбиение на компоненты(модули), вынести повторяющиеся элементы в отдельные файлы. К примеру, есть какойто список блоков с иконками и текстом, этот блок используется или может использоваться на других страницах. Мы выносим его в отдельный файл modules/list/list.html, в этой же директории создаём файлы .sass,.js которые относятся к этому компоненту. В html файле компонента создаём список и цикл элементов, количество итераций берем из переменной. После просто инклюдим html файл в нужное место и в переменной к нему описываем данные для списка. Так удобнее искать элементы, работать с ними, поддерживать и изменять, т.к. изменения будут применены во всех местах где был заинклюден этот компонент.
@@prosto_razrabotka правда есть сложности при создании компонента состоящего из других более мелких, данные в которых так же описываются через переменные. Пока только начал работать в таком направлении. Могу в чем то ошибаться)
Добрый вечер. Спасибо Вам и сразу к проблеме:
Сегодня устанавливал модули и на модуль gulp-saas была 404, а точнее
npm ERR! code E404
npm ERR! 404 Not Found - GET registry.npmjs.org/gulp-saas - Not found
npm ERR! 404
npm ERR! 404 'gulp-saas@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\koval\AppData\Roaming
pm-cache\_logs\2019-12-28T22_37_25_741Z-debug.log
Пытался найти решение сам, но мои попытки вам не интересны, поскольку они не привели меня к решению.
Может ли бить, что модуль поменял название и теперь настройку saas нужно искать отдельно?
Жду Вашего ответа и еще раз спасибо!
А может быть стоит быть просто немного внимательнее? Речь как бы идёт о препроцессоре SASS, а не SAAS
@@prosto_razrabotka Прошу прощение, наверное я неправильно описал проблему. Постараюсь дать сухие факты.
node v.12.14.0
npm v.6.13.4
gulp CLI 2.2.0
local version 4.0.2
При вводе в терминал Visual Studio Code команды npm i --save-dev gulp gulp-saas browser-sync
Получаю:
npm ERR! code E404
npm ERR! 404 Not Found - GET registry.npmjs.org/gulp-saas - Not found
npm ERR! 404
npm ERR! 404 'gulp-saas@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\koval\AppData\Roaming
pm-cache\_logs\2019-12-29T09_31_31_640Z-debug.log
PS C:\Users\koval\Desktop\gulp-project>
При этом npm i --save-dev gulp
npm i --save-dev browser-sync
исполнились и установились без проблем, но отдельно.
Как итог, gulp-saas нету :(
P.s. Работаю на windows10 (возможно в этом есть нюанс)
Тяжёлый случай...
Попробую по-другому. Препроцессор SASS. Логично предположить, что и модуль по имени должен быть схожим, а если быть точнее - gulp-sass, а вы упорно пытаетесь установить gulp-saas!
@@prosto_razrabotka О боги, я прозрел!
Мне очень стыдно. Прошу прощение за столь примитивный вопрос.
Ах. Все пошло.
Большое Вам спасибо за тот контент, что вы делаете! Удачи и меньше таких як я учеников с нашими вопросами :)
Спасибо, помог разобраться.
Есть ссылка на данную сборку?
Вопросик есть. Вот допустим я создаю другой проект, а первый уже есть и все файлы как у вас в видео есть, создаю новую папку, но при этом все эти команды копирую, и у меня соответственно все файлы уже в новом проекте будут с такими же именами, тоесть и index.html и gulp.js и тд, ну вообщем все идентичные, ну разумеется они будут пустые. Это как-то повлияет на работу или пофиг как называются файлы если они в другой папке? И надо ли мне будет для нового проекта на этом же компе прописывать -npm i --save... или можно просто скопировать из другой папки package.json, package-lock.json и node modules?
Первый вопрос не понял.
По второму - копировать node_modules и package-lock не рекомендую. Лучше скопировать package.json и gulpfile, и выполнить npm i. Перечислять модули не требуется, они установятся по списку из package.json
@@prosto_razrabotka Спасибо, первый вопрос я имел ввиду если у меня в одной папке мой хтмл документ называется index.html и цсс файл называется style.scss и в другой папке с новый проектом точно такие же названия я дам файлам, это на что-то повлияет?
@@incprice9575 Нет
@@prosto_razrabotka Спасибо за ответы, ты крут! Щас буду верстать по твоему макету только со своими пикчами :D