Gulp. Обновление сборки. Новые фичи и полезные улучшения

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 95

  • @TrelinGames
    @TrelinGames 2 года назад

    Спасибо за сборку. Немного подшаманил под себя. Добавил 2 плагина ttf2woff и ttf2woff2 которые конвертируют ttf шрифты соответственно. Конвертирую в src и запускаю вручную один раз. Очень удобно.

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @IIIu6ko
    @IIIu6ko 4 года назад +1

    Имхо, слишком усложнил со шрифтами. Их нужно настроить один раз за проект, это занимает пару минут времени, оно не стоит того.
    И вариант с массивом очень шаткий т.к. название шрифта зависит от ресурса от куда он был скачан и соответственно придётся названия подгонять.
    Я скачиваю гугл шрифты и у них названия такого типа "roboto-v20-latin-ext_latin_cyrillic-regular.woff2" :)
    Советую ресурс google-webfonts-helper.herokuapp.com/fonts
    Там все шрифты из google fonts во всех форматах и начертаниях. Этого зачастую достаточно.
    А если нет, то пинаем дизайнера, пусть хотя бы ttf скидывает.

    • @maxgraph
      @maxgraph  4 года назад

      Ну про все эти сложности и шаткости я и сказал) но - мне удобно.

  • @EugeneKizilovv
    @EugeneKizilovv 4 года назад

    Друг, спасибо огромное за сборку, даже как-то не удобно просто в наглую скачивать такой труд! Заметил, что ты оставил ключ к tinypng =)

    • @maxgraph
      @maxgraph  4 года назад

      Да уже поменял его :)

  • @egor9069-EmojiLens
    @egor9069-EmojiLens 4 года назад +1

    благодарен за полезный контент

  • @DmitryDomnichev
    @DmitryDomnichev 3 года назад

    Привет ! Я новичок в верстке и все пытаюсь разобраться с твоим прекрасным галпом. У меня такой вопрос. Значит я хочу подключить иконки с fontawesome. но уже третий день не могу этого сделать. Скажи правильно ли я делаю, или еще что то надо делать? скачал архив с fonta. файл all.css положил в папку vendor. в файле vendor.scss подключил его (@import"./vendor/all";) так же как у тебя подключен normalize. папку webfonts положил в папку resources. И ничего не работает. К слову в пустом проекте без галпа все получается. Что то еще нужно подключить ? Помоги плиз. На главной HTML страницы нужно что то допом подключать? Просто заместо иконок, выводятся пустые квадратики.

  • @СлавикГусев-л4и
    @СлавикГусев-л4и 3 года назад

    Попробовал вместо функции которая отвечает за font-weight для миксина .все равно мы опираемся на название шрифта которое планируем изменить только раз в начале проекта у
    исходника .допустим шрифт roboto-400-regular.ttf .я попробовал так
    let fnn = fontname.split('-');
    if (c_fontname != fontname) {
    fs.appendFile(srcFonts, '@include font("' + fnn[0] + '", "' + fontname + '", ' + fnn[1] + ' , "normal");
    ', cb);
    }

  • @СлавикГусев-л4и
    @СлавикГусев-л4и 3 года назад

    привет ,обдумывал как сделать так чтоб немного более автоматизировать подключение шрифтов .а именно ,сейчас по твоему коду каждый раз при перезапуске галпа у нас обновляется содержимое файла fonts.scss и это не совсем бывает удобно так как иногда названия шрифтов бывает слишком длинные либо типа того и лучше бы у нас была возможность изменить название шрифта в инклуде .но так как при перезапуске галпа инклуд обновиться то такая возможность отсутствует .и пришла мысль сделать проверку на наличие содержимого в файле fonts.scss .типа если файл пустой то мы заполняем инклуд ,а если нет то не трогаем .вроде получилось но приходится при этом запускать галп дважды . первый запуск он заполняет инклуд и вылетает ошибка.а при втором запуске все работает идеально с учетом того что инклуды уже заполнены .
    ну а коментарием ниже уже писал что я разбивши название шрифта на масивы решил вопрос с font-weight.
    теперь вопрос как лучше изменить код так чтоб у нас не возникало ошибки и норм срабатывала проверка .а то костыль хоть рабочий но все же .
    const cb = () => { };
    let srcFonts = './src/scss/basic/_fonts.scss';
    let appFonts = './app/fonts/';
    const fontsStyle = (done) => {
    let file_content = fs.readFileSync(srcFonts);
    if (file_content == '') {
    fs.writeFile(srcFonts, '', cb);
    return fs.readdir(appFonts, function (err, items) {
    if (items) {
    let c_fontname;
    for (var i = 0; i < items.length; i++) {
    let fontname = items[i].split('.');
    fontname = fontname[0];
    let fnn = fontname.split('-');
    if (c_fontname != fontname) {
    fs.appendFile(srcFonts, '@include font("' + fnn[0] + '", "' + fontname + '", ' + fnn[1] + ' , "normal");
    ', cb);
    }
    c_fontname = fontname;
    }
    }
    });
    }
    done();
    };

  • @serhiiretsenko2237
    @serhiiretsenko2237 4 года назад

    Спасибо за годноту ;)

  • @richi_oct
    @richi_oct 3 года назад +2

    В чём проблема?
    'rewrite' errored after 55 ms
    SyntaxError: Unexpected token o in JSON at position 1
    Через npm всё установил, брал даже код исходника на github, ошибка одна и та же

    • @maxgraph
      @maxgraph  3 года назад +1

      все равно нужно увидеть итоговый код)

    • @richi_oct
      @richi_oct 3 года назад

      @@maxgraph
      PS C:\Users\User\Desktop\gulp> gulp cache
      (node:23096) V8: C:\Users\User\Desktop\gulp
      ode_modules\ttf2woff2\jssrc\ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib
      (Use `node --trace-warnings ...` to show where the warning was created)
      [13:10:14] Using gulpfile ~\Desktop\gulp\gulpfile.js
      [13:10:14] Starting 'cache'...
      [13:10:14] Starting 'cache'...
      [13:10:15] Finished 'cache' after 206 ms
      [13:10:15] Starting 'rewrite'...
      [13:10:15] 'rewrite' errored after 68 ms
      [13:10:15] SyntaxError: Unexpected token o in JSON at position 1
      at JSON.parse ()
      at Transform._flush (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite\index.js:53:26)
      at Transform.prefinish (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite
      ode_modules
      eadable-stream\lib\_stream_transform.js:129:10)
      at Transform.emit (events.js:315:20)
      at Transform.EventEmitter.emit (domain.js:529:15)
      at prefinish (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite
      ode_modules
      eadable-stream\lib\_stream_writable.js:611:14)
      at finishMaybe (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite
      ode_modules
      eadable-stream\lib\_stream_writable.js:620:5)
      at endWritable (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite
      ode_modules
      eadable-stream\lib\_stream_writable.js:643:3)
      at Transform.Writable.end (C:\Users\User\Desktop\gulp
      ode_modules\gulp-rev-rewrite
      ode_modules
      eadable-stream\lib\_stream_writable.js:571:22)
      at DestroyableTransform.onend (C:\Users\User\Desktop\gulp
      ode_modules
      eadable-stream\lib\_stream_readable.js:577:10)
      [13:10:15] 'cache' errored after 431 ms

    • @alexeyponomarev3241
      @alexeyponomarev3241 3 года назад

      ​@@richi_oct Если кто-то также столкнётся с такой проблемой - замените в функции rewrite первую строку на:
      const manifest = fs.readFileSync('./app/rev.json');

  • @DS_av
    @DS_av 6 месяцев назад

    Макс привет! Я видел ты, обновил сборку на github. И в описании ты рекомендуешь, например для burger создавать файл в папку components, копировать туда import { burger } from '../functions/burger.js'; из файла _functions.js, а затем подключать файл в _components.js.
    Почему нельзя напрямую вставить import { burger } from './functions/burger.js'; в файл main.js?
    Получается в папке components лежит файл burger.js с одним импортом, зачем лишние манипуляции с файлами? Для чего так сделано?))

    • @maxgraph
      @maxgraph  6 месяцев назад +1

      Привет!
      На большом сайте main.js разрастется и потом сложнее будет найти участок кода, который выдаёт ошибку. А деление на файлы решает эту проблему)

    • @DS_av
      @DS_av 6 месяцев назад

      @@maxgraph понял спасибо)

  • @ivancoin2570
    @ivancoin2570 3 года назад

    Всем привет. Пытаюсь подключить slick слайдер и jquery.
    Выдает такую ошибку:
    ERROR in ./src/js/functions/slick.min.js
    Module not found: Error: Can't resolve 'jquery' in 'C:\Users\ivan_\Desktop\InternetStore0-1\src\js\functions'.
    Может кто знает в чем проблема? Не видит почему то jquery.

  • @noiseless6800
    @noiseless6800 4 года назад

    И еще моментик, перечисление расширений:
    watch('./src/img/**.{jpg,jpeg,png,gif,webp}', imgToApp);
    Так удобней, меньше строк.

    • @maxgraph
      @maxgraph  4 года назад +1

      как вариант)

  • @Dyus6661
    @Dyus6661 4 года назад +1

    А не проще ли использовать Parcel вместо Gulp'a, конкретно для вёрстки?

    • @maxgraph
      @maxgraph  4 года назад +1

      Мне нет)

  • @Самиркурь-о8э
    @Самиркурь-о8э 3 года назад

    Макс подскажи пожалуйста, как мне выгрузить твою готовую сборку галп?, сижу не очень могу понять, просто смотрел твой марафон по галпу новый, там нужен файл в гите.yml, можешь если нетрудно ответить, либо записать видос по этому поводу, заранее спасибо тебе за труд.

    • @maxgraph
      @maxgraph  3 года назад +1

      Привет, так на гите нажать download просто и все

    • @Самиркурь-о8э
      @Самиркурь-о8э 3 года назад

      @@maxgraph я просто в начале твоего марафона не понял как сделать yml, чтобы твою сборку скачать просто в проекте репозитории делать npm - i?, заранее спасибо)))

    • @maxgraph
      @maxgraph  3 года назад

      Yml то зачем, не нужен.

    • @Самиркурь-о8э
      @Самиркурь-о8э 3 года назад

      @@maxgraph аа все хорошо, просто галп в папку с репозиторием

  • @noiseless6800
    @noiseless6800 4 года назад +1

    Минификация html не лучшая идея, без например gulp-if с переменной isLanding. Все что выше лендинга требует натяжку на движок либо свою админку, а натягивать минифицированный файл сам понимаешь.

    • @maxgraph
      @maxgraph  4 года назад +1

      если не надо минифицировать - я просто отключу) но в большинстве случаев это лендинг.

    • @IIIu6ko
      @IIIu6ko 4 года назад

      @@maxgraph Меня клиенты часто просят не минифицировать css и js, не говоря уже о html.

  • @Незванныйгость-в4д
    @Незванныйгость-в4д 4 года назад

    Привет. А что насчет font-style? Если допустим в названий шрифта будет Lato-ThinItalic и по-моему Ваш миксин не учитывает как раз таки font-style.

    • @maxgraph
      @maxgraph  4 года назад

      Не учитывает, потому что не сделал)
      Его можно и в самом элементе прописать

  • @АнтошкаРадов
    @АнтошкаРадов 4 года назад

    Спасибо за видео, есть вопрос: не пробовал ли в сборке использовать что-нибудь для вставки тега picture с srcset, для ретиновой графики или просто в зависимости от адаптива подключения других изображений? Очень интересно, т.к. сталкивался с этим и парит весьма в ручную прописывать...

    • @maxgraph
      @maxgraph  4 года назад

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

  • @romannovak375
    @romannovak375 4 года назад

    Добрый день у меня проблема при установке gulp-ttf2woff2 ibb.co/HgZVYRZ это только у меня ?

  • @tomitomion1179
    @tomitomion1179 4 года назад

    Спасибо, что поделились, сборка хорошая, многое взял на вооружение =) Немного подрезал функцию стилей шрифтов, теперь она избавилась от cb() и умеет определять italic стили, clck.ru/QjPtZ если интересно)
    upd: Косяк с асинхронностью, теперь вроде работает )
    upd2: Вернул авто очистку фала font.scss, не заметил нужную функцию )

    • @maxgraph
      @maxgraph  4 года назад

      спасибо!

    • @tomitomion1179
      @tomitomion1179 4 года назад

      @@maxgraph у Вас вотчинг работает на добавление шрифтов? Никак не удается завести

    • @tomitomion1179
      @tomitomion1179 4 года назад

      А, всё норм

  • @Mr-in8km
    @Mr-in8km 4 года назад

    Ухожу в офлайн работу. Все что успел изучить за лето оказалось не нужным, это: html, css, не много js, и веб дизайн. За эти 3 месяца я заработал 500 рублей. Оставлю вёрстку как хобби. Всем удачи.
    Автору канала спасибо большое за годные уроки.

    • @maxgraph
      @maxgraph  4 года назад +1

      Очень жаль, удачи вам!

    • @gubatenkov
      @gubatenkov 3 года назад

      loh

    • @Mr-in8km
      @Mr-in8km 3 года назад +1

      @@gubatenkov вовремя)) ровно через месяц после написания этого коментария, я устроился в студию, и зарплата растет + премии хорошие))

    • @maxgraph
      @maxgraph  3 года назад +1

      Кайф, поздравляю))

  • @samura7798
    @samura7798 4 года назад

    Если не ошибаюсь, то шрифты не будут работать с данной сборкой. Объясню почему. Мы изначально прописываем пути для шрифтов не учитывая хэш в dev сборке. Но в build сборке у нас уже есть хэш и получается что пути становятся неверными и шрифты отказываются работать.

    • @maxgraph
      @maxgraph  4 года назад

      По идее нет, но уточню, спасибо)

    • @samura7798
      @samura7798 4 года назад

      @@maxgraph По идеи шрифты можно не хэшировать. Это не такая первостепенная важность. Думаю, что объявить их один раз будет вполне достаточно. Либо в webpack'е подключить file-loader и там хэшировать их и указывать какой должен быть public path.
      Как-нибудь вот так:
      loader: "file-loader",
      options: {
      name: "[folder]/[name]-[hash].[ext]",
      emitFile: false,
      outputPath: 'src/assets/fonts/',
      publicPath: '../assets/fonts',
      },
      А так очень нравится ваш канал. Один из лучших IT каналов в СНГ сегменте.

    • @maxgraph
      @maxgraph  4 года назад

      спасибо)

  • @__pava8037
    @__pava8037 4 года назад

    Отлично. Но вместо того, что бы создавать отдельный таск для htmlmin, не лучше будет подключить gulpif, сделать параметр для продакшина и просто включить pipe в основной html таск?

    • @maxgraph
      @maxgraph  4 года назад

      Тут кто как хочет. Мне удобно так)

    • @__pava8037
      @__pava8037 4 года назад

      @@maxgraph ну в таком случае ладно. А так спасибо, по твоим видосам достаточно неплохо разобрался в gulp. Но как идея на будущее видео по галпу будет интересна такая реализация, на эту тему почти никто на ютубе не говорил

  • @ИванДядюра-ы4й
    @ИванДядюра-ы4й 3 года назад

    Привет, не перезаписываются кэшированные файлы в CSS

    • @maxgraph
      @maxgraph  3 года назад

      Надо смотреть

  • @youngejuk
    @youngejuk 3 года назад

    Идея с автоподключением шрифта крутая, но не надежная (очень старался, но OpenSans криво определяло ExtraBold начертание, с другими думаю могут быть такие же проблемы).
    Оставил себе конвертацию (бо ручками реально напряжно все это делать было), но убрал с exports.default, ибо тормозит запуск так нормально, а по факту 1 (пару раз) запустить таск ручками не так сложно).
    подключаю с помощью такого миксина: prnt.sc/wnkdlr

  • @tovjukov
    @tovjukov 3 года назад

    А, если в 6:07 название будет через нижнее подчеркивание или через пробел?

    • @maxgraph
      @maxgraph  3 года назад

      Тогда будет ошибка)

  • @Zadrot1080p
    @Zadrot1080p 3 года назад

    Шо насчет npm-scripts думаешь? Работают гораздо быстрее gulp'a

    • @maxgraph
      @maxgraph  3 года назад

      не смотрел. куда уж быстрее, сборка и так за секунду происходит)

  • @ohwooow1223
    @ohwooow1223 4 года назад

    Привет! Вопрос не по галпу, но ты можешь, пожалуйста, записать настройку плагина mailPHP?

    • @maxgraph
      @maxgraph  4 года назад

      Привет. А что там настраивать? По отправке видео уже есть, что нужно?

    • @ohwooow1223
      @ohwooow1223 4 года назад

      @@maxgraph Ой, извини) Можешь тогда скинуть ссылку на этот видос?

    • @maxgraph
      @maxgraph  4 года назад

      С телефона неудобно, в плейлисте js-плагины есть)

    • @ohwooow1223
      @ohwooow1223 4 года назад

      @@maxgraph Спасибо!

  • @МихаилФедоров-х4л
    @МихаилФедоров-х4л 3 года назад

    Не могу вызвать спрайт на странице ! Помогите

    • @maxgraph
      @maxgraph  3 года назад

      А что именно не так? Надо смотреть

    • @МихаилФедоров-х4л
      @МихаилФедоров-х4л 3 года назад

      @@maxgraph не могу вывести изображение. Обясни куда что вставлять!

    • @МихаилФедоров-х4л
      @МихаилФедоров-х4л 3 года назад

      @@maxgraph не получается вывести видео. Ложу в папку resources , все как написано в сборке!

    • @МихаилФедоров-х4л
      @МихаилФедоров-х4л 3 года назад

      Что я мог упустить?

  • @shade4524
    @shade4524 4 года назад

    Привет, настроил gulp, по твоему гайду. Сначало всё отлично работало, потом task: styles перестал выполняться с ошибкой ("The following tasks did not complete: default, styles. Did you forget to signal async completion?") При этом я ничего не изменял в самом файле в процессе работы. Не могу понять, как это пофиксить.

    • @maxgraph
      @maxgraph  4 года назад

      Тут нужно именно асинхронность гуглить, такое бывает если таск по какой-то причине выполняется не вовремя. Либо же выполняется с ошибкой
      Как вариант решения - сделать колбэк, поищите в интернете

    • @shade4524
      @shade4524 4 года назад

      @@maxgraph заметил закономерность, что как только подключаю более 2 компонентных scss файлов, к главному main.scss , task перестаёт работать.

    • @maxgraph
      @maxgraph  4 года назад

      ну да, значит скорее всего в этом и проблема, не успевают подключиться, обработаться возможно. stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async - тут куча вариантов решения.

    • @shade4524
      @shade4524 4 года назад

      @@maxgraph спасибо большое, разобрался)

    • @maxgraph
      @maxgraph  4 года назад

      отлично )

  • @semdevmaster
    @semdevmaster 4 года назад +1

    Походу осознание оптимальности сборки так и не пришло в Вашу голову, объясню один из многих косяков сборки - таймкод 2:30
    Вы добавляете "звездочку" для обработки всех html файлов и тоже самое делаете в вотчере - а теперь ситуация: (сборка запущена)
    Есть у меня, допустим, 30 html файлов, я делаю малейшее изменение в ОДНОМ из них, рассчитывая, что только именно он будет обработан, но
    Ваш таск по обработке html прогонит все 30 файлов и запишет их на диск, и будет делать так каждый раз при любом изменении в любом файле html
    А теперь представим, что у меня в компе стоит SSD диск, у которого есть лимит на количество циклов записи/перезаписи и этот лимит уменьшается с каждой операцией записи файлов на диск. Я делаю всего лишь одно изменение в одном файле, а мне на диск постоянно записываются 30 шт. Думаю не сложно представить сколько этих операций может набраться за целый рабочий день, а за целый месяц! - а потом будете удивляться, почему Ваш SSD так быстро вышел из строя.
    И это только html файлы, а в проекте ещё есть сотни других файлов (картинки, стили, скрипты и.т.д)
    Какой выход ? - я уже писал в комментарии к прошлому видео по Gulp 4, что "читайте подробнее документацию", там есть все необходимые методы, чтобы обойти эту проблему. Ну и на последок - плагин, который может помочь отслеживать работу любого таска - gulp-debug, он как раз может показать наглядно сколько файлов у Вас проходят обработку при изменениях.

  • @diekunstUA
    @diekunstUA 4 года назад

    Возможно я ошибаюсь, но разве не проще настроить сам сервер что бы не кешировал данные? Видео как всегда интересное и полезное.

    • @maxgraph
      @maxgraph  4 года назад

      Видимо нет, раз такое сплошь и рядом)

    • @diekunstUA
      @diekunstUA 4 года назад

      @@maxgraph если вы чего-то не знаете это не значит что этого нет. со всем уважением к вам. я просто предложил. я думаю что такая возможность есть opcache.enable = Off
      xcache.cacher = Off

    • @maxgraph
      @maxgraph  4 года назад

      А кто вам сказал, что я не знаю?) знаю, но часто вижу, что используют именно такой прием с переименовыванием файлов. Вот и показал его.

    • @maxgraph
      @maxgraph  4 года назад

      Но спасибо что написали, может кому-то и такое будет полезно :)

    • @diekunstUA
      @diekunstUA 4 года назад

      @@maxgraph Мне никто не говорил. я просто подумал. а почему все усложнять )). лично я пользуюсь еще большими костылями чем вы! )))

  • @РусланРусалкин-х7ш
    @РусланРусалкин-х7ш 3 года назад

    При всем моем уважении к Вам, но сборка которую вы показываете и сборка по ссылке (github.com/maxdenaro/gulp-max...​ - исходники из видео на GitHub) - разные! Неужели тяжело привести к общему знаменателю? Ведь пишут люди, что нет подключения шрифтов gulpfile.js и в помине!

    • @maxgraph
      @maxgraph  3 года назад

      я выпустил отдельное видео по этой теме :)