Автообновление CSS кода (gulp-livereload)

Поділитися
Вставка
  • Опубліковано 23 сер 2024
  • Показываю, как очень легко поднять автообновление CSS/SCSS кода посредством Gulp.
    Также рассматривается автоминификация/автопрефиксинг.
    Всё это на изи.
    👊 Наш 🆅🅺: how...
    👊 Наш 🆃🅶 чат: t.me/howdyho
    👊 Наш 🅸🅽🆂🆃🅰🅶🆁🅰🅼: / abrahamtugalov
    🤟 Понравился урок?
    Подпишись 👑
    Вруби уведомления 🔔
    Поставь лайк 👍
    Оставь комментарий 💬
    🆇 Ссылки из видео 🆇
    𝟭: nodejs.org/en/
    𝟮: gulpjs.com/
    𝟯: www.npmjs.com/...
    🎮 Подумываешь прикупить себе игру? ;)
    Лучшие цены 💰 на игры Steam 🎮 и рандомы 🎲 только здесь -
    bit.ly/SteamAlm...
    🎬 Реклама у нас:
    topic-8...
    💵 Реквизиты для донатства (WebMoney) 💵
    R250434217196
    Z252920168434
    U415267612522
    💗 Музыкальный трек предоставлен UA-cam Audio Library.

КОМЕНТАРІ • 178

  • @soundclub529
    @soundclub529 4 роки тому +14

    Для всех у кого не работает код из видео, это связанно с обновленной версией gulp
    Для Gulp v4 надо немного изменить код
    var
    gulp = require("gulp"),
    livereload = require("gulp-livereload");

    gulp.task("reload-css", function() {
    gulp.src('./src/*.css')
    .pipe(livereload());
    });
    gulp.task("default", function() {
    livereload.listen();
    gulp.watch('./src/*.css', gulp.parallel('reload-css', 'default'));
    });

    • @Burruo
      @Burruo 4 роки тому +2

      У меня не робит... Ну то-есть запускается и просто стоит на месте Starting 'default'...

    • @awenn2015
      @awenn2015 4 роки тому

      @@Burruo такая же фигня

    • @GennodBeats
      @GennodBeats 4 роки тому +3

      @@Burruo Это значит, что все работает!

  • @HowdyhoNet
    @HowdyhoNet  6 років тому +18

    Не забудьте, что для локальных файлов (если не с вебсервера запускаете проект), нужно в расширениях у livereload поставить галочку "Разрешить открывать файлы по ссылкам".
    В хроме на любую иконку расширения ПКМ -> Управление расширениями, ищите Livereload в списке и ставите эту галочку.

    • @user-mx3dl3fn8e
      @user-mx3dl3fn8e 6 років тому

      Хауди Хо™ - Просто о мире IT! Обновил npm и функция reload-css выдаёт ошибку RefernceError: pipe is not difinened . Посмотрел на форумах ,но к сожалению не смог найти такой случай , попробовал решения из подобных ситуаций ,но ошибки лишь добавлялись. Прости за стол длинный комментарий, если не сможешь ответить полностью , намекни в чем дело

    • @evgenym574
      @evgenym574 6 років тому

      Хауди, привет) Всё работает, но 2 вопроса не дают покоя) 1. Автообновление html-кода похожим образом, через gulp настраивается?) 2. Чтобы изменения на странице сработали (после изменения css-кода), нужно каждый раз CTRL+S нажимать в ST3?

    • @jakespensor2577
      @jakespensor2577 6 років тому

      Попробуйте программу UntelliJIDEA она лучше чем то что вы используете чтоб писать код посмотрите. Она облегчит написание кода

    • @user-dq3us9nl9t
      @user-dq3us9nl9t 5 років тому

      @@evgenym574 не знаю как в саблайме, но, например в VSCode есть функция автосохранения файла, думаю в других редакторах тоже присутствует.

  • @fusome
    @fusome 4 роки тому +1

    урок просто бомба по лаконичности и кол-ву выдаваемой полезной информации! Спасибо!

  • @user-ko4tj4yd5c
    @user-ko4tj4yd5c 6 років тому +5

    Можно это и без галпа сделать. Зажимаешь шифт и кликаешь правой кнопкой по папке проекта, затем выбираешь пункт "Открыть в Пауэр Шелл"(ну или в командной строке) и вводишь туда небольшую команду:
    browser-sync start --server --files "php/*.php,css/*.css,js/*.js,html/*.html,*.*"
    Вуаля - автообновление работает на всех форматах файлов, что указаны в команде. Это если ты не заморачиваешься галпами и всякими препроцессорами. Однако нужен npm, само собой.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +2

      Есть десятки способов как это сделать.
      Лично мне больше всего нравится самый адекватный вариант - с помощью Gulp (который и был показан в уроке).

    • @user-ko4tj4yd5c
      @user-ko4tj4yd5c 6 років тому +1

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

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Верно, поддерживаю.
      Лучше сразу научиться работать с системами сборок и более не париться.
      Перезагрузка CSS кода - это простая задача.
      Добавь к этому SourceMaps, PUG (это новое название Jade), какой-нибудь Sharp (массовая оптимизация изображений), и парочку других моментов, - и вот тебе никакая CLI утилита не поможет.

    • @user-lv4ei2ko8h
      @user-lv4ei2ko8h 6 років тому

      Хауди Хо™ - Просто о мире IT! Хауди, а как автоперезагрузку html и js файлов сделать?

  • @Ed-Bubble
    @Ed-Bubble 6 років тому +1

    Кто спрашивает, что за командная строка, читайте ответ Хауди, это ConEmu, крутая штука. Рекомендую еще в пару к нему установить Cygwin с самыми необходимыми линукс-пакетами типа vim, git итд (помимо core utils конечно), установить в настройках conemu загрузку bash shell и тогда ваша виндовая командная строка будет почти как в линуксе по удобству=)

  • @user-ub9fy3sj1k
    @user-ub9fy3sj1k 6 років тому

    О - нет просмотров))
    как-раз смотрю твои видео и вижу новое видео)

  • @goosenorm7252
    @goosenorm7252 6 років тому

    ОООООООО ждал это видео!!!!

  • @user-hr3gw8yj5t
    @user-hr3gw8yj5t 6 років тому +24

    Запиши видео по настройке SublimeText какие настройки плагины используешь и т д.

    • @vasya8441
      @vasya8441 6 років тому +5

      таких видео уже много епта, прочитай книгу про интернет, и там будет как провильно в нем искать и не будешь задавать фопросы свои

    • @user-hr3gw8yj5t
      @user-hr3gw8yj5t 6 років тому +4

      Писать научись сначала.

  • @medved0807
    @medved0807 6 років тому +9

    Я за browser-sync. Можно просматривать сразу в нескольких браузерах, в нем есть автоскрол, не надо встраивать код в html.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Здесь, как ты наверное заметил, тоже не нужно никакой код встраивать в HTML.
      BrowserSync в идеале ставится и настраивается именно через системы сборок типа Gulp/Grunt.

    • @medved0807
      @medved0807 6 років тому +1

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

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      В любом случае, лучше изучить работу со сборщиками и навсегда забыть о CLI утилитах и всём вообще.
      В идеале либо Gulp, либо Webpack.

    • @medved0807
      @medved0807 6 років тому +2

      Gulp очень гибкий. На нем сделал фронтенд среду для быстрой верстки по методологии bem, на выходе красивый и понятный код (css, js, html) для заказчика и минимизированный css и js с кодом из библиотек (jQuery, Bootstrap). Webpack тоже нравится, я его в основном использую вместе с Symfony (пример в symfony-demo репозитории).

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      На любителя, как говорится.
      Если ручками менеджить фронт (что вполне легко, особенно с sourcemaps) то Gulp - по сути лучшее решение.

  • @RadCor
    @RadCor 5 років тому

    Блин жесть, сколько хоботится нужно что бы сделать всего-то лайв релоад. Просто скачиваем редактор кода Brackets, и там эта штука есть их коробки.

  • @voranas-programming
    @voranas-programming 6 років тому +1

    порой комменты дают ответы на вопросы)

  • @petyasavilbish2461
    @petyasavilbish2461 5 років тому +3

    Что означает ошибка task never defined :default

  • @pokanet14
    @pokanet14 6 років тому

    А ты можешь запилить видос по препроцессору jade (pug), Как будет выглядеть gulpfile c browser-sync, serve и т.д. У меня в принципе все сработало, только как сделать так, чтобы массивы можно было бы пилить не в препроцессор, а в файлы .json?

  • @arttmptt
    @arttmptt 6 років тому +3

    А ведь можно проще. Просто установить плагин для хрома (этот же) и после этого установить плагин для сублайма (LiveReload), перезапустить сублайм и всё. Вообще изи.

    • @petyasavilbish2461
      @petyasavilbish2461 5 років тому +1

      Спасибо тебе большое ))

    • @awenn2015
      @awenn2015 4 роки тому

      у меня плагин не работает

  • @staticcheese8608
    @staticcheese8608 5 років тому +8

    У меня возникла следующая проблема при запуске gulp в консоли:
    Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    Решилось заменой строки gulp.watch('./src/*.css', ['reload-css']); на gulp.watch('./src/*.css', gulp.series('reload-css'));
    Источник: qaru.site/questions/1010594/gulp-error-watch-task-has-to-be-a-function

    • @user-ky8mm8ee7z
      @user-ky8mm8ee7z 5 років тому +5

      У меня с решением просто начинает виснуть консоль(starting но не выполняется)

    • @_Fantom_.
      @_Fantom_. 5 років тому +2

      Та же фигня, starting не выполняется...И в редакторе, слово: "series", не подсвечивается, значит где-то ошибка..

    • @todor_burle
      @todor_burle 5 років тому

      у меня поле етого все равно ошибка, помогла замена таска 'reload-css' на
      gulp.task('reload-css', function () {
      return gulp.src('src/*.css')
      .pipe(livereload());
      });

    • @awenn2015
      @awenn2015 4 роки тому

      @@todor_burle тоже не помогает

  • @user-ko4tj4yd5c
    @user-ko4tj4yd5c 6 років тому +4

    Хауди, а нет планов замутить видос по препроцессорам html? просто тут столкнулся недавно, да так для себя и не решил: нужно оно или нет. Если пользовался, то было бы интересно послушать твою точку зрения.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +2

      Для крупных проектов выбора нет, - без шаблонизаторов не обойтись.
      Замучаешься элементарно без инклудов, не говоря о блочной системе.
      Делал крупный проект по Front-End (большой шаблон), так вот у меня там было >50 страниц, и чтобы поменять что-то в шапке, мне бы пришлось либо юзать автозамену (что далеко не всегда возможно), либо в каждом файле вносить изменения (что занимает примерно 20 минут и есть риск допустить ошибку).
      Но благодаря шаблонизатору приходится менять только 1 файл и всё.

    • @user-ko4tj4yd5c
      @user-ko4tj4yd5c 6 років тому

      Хауди Хо™ - Просто о мире IT!
      Хорошо, я тебя понял, но когда сам пытался использовать Pug, это был тихий ужас. Непонятки с пробелами между тэгами, попытки вставить внутрь друг друга или что-то подобное просто жуть. Такая же фигня, если у элемента два или больше аттрибута. Ну и так по мелочи, типа отсутствия плагина для подсветки синтаксиса. Возможно к нему просто привыкнуть нужно, но, если к препроцессорам css как-то быстро проникаешься, то тут я не смог.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Мне это тоже по началу мешало, хотя в принципе и сейчас принцип индентации в PUG раздражает.
      Можно в целом написать свой сборщик шаблонов на каком-нибудь PHP (шаблонизатор Twig, к примеру), либо то же самое на Python.
      Я так в своё время дописывал сам таски на питоне, до сих пор либа есть на гитхабе github.com/Priler/PlaceHoldMachine

    • @user-ko4tj4yd5c
      @user-ko4tj4yd5c 6 років тому

      К слову о питоне. Есть желание узнать больше о бэк энде. Ты бы что посоветовал учить: PHP(я его знаю немного, но на уровне фронта), Node или Python? Может быть посоветуешь литературу какую-нибудь или ресурс?

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +2

      Всё это есть в нашей группе vk.com/howdyho_net

  • @peroute2040
    @peroute2040 6 років тому +1

    Запиши видео про твой sublime text пожалуйста

  • @piterkola1
    @piterkola1 6 років тому

    Лайк 58 поставил. Прямо в тему видос зашел!!!

  • @SnowmazeDev
    @SnowmazeDev 6 років тому

    Кстати, а можешь рассказать про нативный код. А то в русском интернете про него мало сказано. Или про него нечего рассказывать?

  • @NKEES-dl2vv
    @NKEES-dl2vv 6 років тому

    Хауди, привет. Ты не подскажешь какую тему ты используешь в браузере? Спасибо

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +1

      chrome.google.com/webstore/detail/modern-flat/pdcjjgefkpoemmlcjfcfkeminneboaob

  • @user-qq6jt1du2z
    @user-qq6jt1du2z 6 років тому +1

    о кажись заработало. не понял... авто сохранение должно работать? или надо нажимать после изменения css ctrl+s

    • @lobzik6680
      @lobzik6680 6 років тому

      Нажимать надо .

  • @user-un7gt7et2c
    @user-un7gt7et2c 6 років тому

    спасибо за ролик

  • @user-ro2we7sh4d
    @user-ro2we7sh4d 6 років тому

    Ништяк, работает)

  • @nisto589
    @nisto589 6 років тому

    Красава!!!👍

  • @user-lp2ys1ib5g
    @user-lp2ys1ib5g 6 років тому

    А еще есть альтернатива ливрелоад? Потому что при установке синка мне пишет ошибка локалхост3000, а когда по твоему видео устанавливаю галп то в папке с сорсем не уст. галп файлы... =(

  • @davitvardanyan4938
    @davitvardanyan4938 5 років тому

    Спасибо за гайд Хауди.
    Я бы хотел заметить что для gulp-livereload v.4.x.x нужно добавить gulp.series в gulpfile.js-е.
    А еще мне кажется нужна помощь. У меня, когда запускаю gulp в терминале, вижу это
    [00:04:57] Using gulpfile ~/gulpfile.js
    [00:04:57] Starting 'default'...
    А потом когда нажимаю save в sublime редакторе, в терминале добавляются строки-
    [00:05:21] Starting 'reload-css'...
    [00:05:21] /Users/davitvardanyan/src/style.css reloaded.
    Ну и в браузере вижу обновление, радуюсь, и больше не работает. Перезапускаю терминал, снова команда gulp, либо sudo gulp, и снова работает только раз как описано выше. Тоже самое в windows 10.
    node - v11.5.0, npm - 6.4.1
    Может все очень банально, но у меня не получается уже день третий. Попробовал найти гуглить что то подобное, но опять смог решить проблему. Может кто-то знает в чем дело. Либо автор подскажет.

  • @kuldm
    @kuldm 6 років тому

    может я что-то упустил, но делал всё как в видео, и когда ввожу gulp, пишет no gulpfile found. В чём вопрос, помоги пожалуйста.

  • @Strochkin
    @Strochkin 3 роки тому

    У меня не получается(( ломаюсь уже неделю(( откуда берется файл package-lock.json? Что в нем прописано? Почему ошибку командная строка пишет при установке?

  • @Sunnatulloh
    @Sunnatulloh 6 років тому

    Базар жок 👍👍

  • @user-ir7sw8sn8h
    @user-ir7sw8sn8h 6 років тому

    Круть. Поставь себе расширение "Context" на хром, ужс как много сразу расширений, адресной строки не видно.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Не люблю подобные расширения.
      У меня монитор 21:9, так что адресная строка вечно почти полностью пустая.
      Но вот в видеоуроках да, есть смысл что-то с этим сделать.

  • @paulelmatsidis2713
    @paulelmatsidis2713 6 років тому

    Я уже 2 года в web'е. Ни разу не использовал аля reloadы.Хоть мне и понятно но объясните в чем же гигантское преимущество перед тем же devtools где копипасчу готовый уже продакшн css код в нужный файл?

  • @dforexzero00xcf35
    @dforexzero00xcf35 6 років тому +4

    Почему я нажимаю на иконку плагина и кружочек не заполняеться и нечего не работает,причём все установлено в консоле поеазывает что все работает ,почему так?

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +1

      Нужно в расширениях у livereload поставить галочку "Разрешить открывать файлы по ссылкам".
      В хроме на любую иконку расширения ПКМ -> Управление расширениями, ищите Livereload в списке и ставите эту галочку.

    • @dforexzero00xcf35
      @dforexzero00xcf35 6 років тому

      Хауди Хо™ - Просто о мире IT! Спасибо,а в sublime text 3 надо сохранять файл чтобы перезагрузилось да?

  • @kilmorn4167
    @kilmorn4167 6 років тому

    Попользовался сутки, весьма удобно, главное что бы экран был широкий, ибо разрешение немного ужимается, но css код не широкий, 350px за глаза хватает на мониторе. Гайд годный, спасибо)

  • @alexey5139
    @alexey5139 6 років тому

    для тех кому надо скину gulpfile.js
    Я его немного поднастроил под себя.
    Тут нету компиляции SASS/SCSS и есть автоматическое обновление html.
    Пользуйтесь.
    pastebin.com/ZW5szrPN
    P.S. Обновляются файлы index.html и style.css из ОСНОВНОГО КАТАЛОГА. т.е. там где у автора находится src

  • @Sinster72u
    @Sinster72u 6 років тому +1

    Помоему для верстки browserSync интереснее гораздо выглядит, т.к. не перезагружает страницу а инжектит стили. Ну и плагин не нужен. Можно обложиться телефонами/планшетами на всех устройствах все будет обновляться по сохранению

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Livereload не перезагружает страницу.
      А BrowserSync адекватно настраивается в том числе в виде плагина для Gulp (что, собственно, лучше и делать).

  • @user-xu4pw3tf5v
    @user-xu4pw3tf5v 6 років тому

    Хауди, а можешь запилить видос по webpack?

  • @Lazeratrax
    @Lazeratrax 5 років тому

    Подскажите пожалуйста, livereload не работает, по нажатию на кнопку выходит сообщение:
    "Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is running. (We recommend guard-livereload, until LiveReload 2 comes to your platform.)"
    Как решить проблему?

  • @sirius_adlercem5282
    @sirius_adlercem5282 Рік тому

    Когда нажимаю на расширение пишет:
    Could
    not connect to LiveReload server. Please make sure that a compatible LiveReload server is running.
    (We recommend guard-livereload, until LiveReload 2 comes to your platform.)

  • @kondormitrandir4380
    @kondormitrandir4380 6 років тому

    привет , gulp нормально работает с css , но когда начинаю подключать scss и делаю все как у тебя по кадрам у меня не хочет работать он

  • @petyasavilbish2461
    @petyasavilbish2461 5 років тому

    Чет у меня в таске ошибка 'No gulpfile found ' Что делать ?

  • @SnowmazeDev
    @SnowmazeDev 6 років тому +1

    я в Brackets код пишу)

  • @AndreySergeevSergeev252
    @AndreySergeevSergeev252 5 років тому +1

    Только что установил nodejs проверил версию 6.4.1 обновил стало 6.5.0. Вывод : не всегда npm идет последней версии с nodejs.
    В общем дописываю:
    Так и не получилось настроить автообновление. Выдает ошибку раза 3 повторял все что в видео
    PS D:\Mysite\livereload-example\gulpfile.js
    [01.56.56] Using gulpfile
    [01.56.56] Starting 'default'...
    [01.56.56] 'default' errored after 22 ms
    [01.56.56] Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    Придется искать другие варианты!

    • @hellmen81
      @hellmen81 5 років тому +1

      Решилось заменой строки gulp.watch('./src/*.css', ['reload-css']); на gulp.watch('./src/*.css', gulp.series('reload-css'));
      Источник: qaru.site/questions/1010594/gulp-error-watch-task-has-to-be-a-function

  • @user-bf8dc2yg4w
    @user-bf8dc2yg4w 6 років тому

    Хауды ти демон программирования

  • @oleksandrlopatin1345
    @oleksandrlopatin1345 6 років тому +1

    У меня почему-то не обновляется стиль. В cmd все перезагрузки отображает , делал всё по уроку. Не подскажете почему так?

    • @mr_aress
      @mr_aress 6 років тому

      Кстати у меня тоже самое, но у меня не отображается в расширении браузера та самая точка которая показывает что соединение с сервером прошло успешно.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому +3

      Нужно в расширениях у livereload поставить галочку "Разрешить открывать файлы по ссылкам".
      В хроме на любую иконку расширения ПКМ -> Управление расширениями, ищите Livereload в списке и ставите эту галочку.

    • @oleksandrlopatin1345
      @oleksandrlopatin1345 6 років тому

      Заработало, спасибо!

  • @1311avenue_
    @1311avenue_ 5 років тому

    Сначала npm и node видел, сменил директорию для папки сайта, снова ничего не видит, что делать?

  • @Hello_world_2020A
    @Hello_world_2020A 6 років тому

    У меня вопрос????
    Как сделать такое в редакторе Microsoft Visual Studio 2017
    это просто мой любимый редактор именно только а Microsoft Visual Studio 2017
    Хочу сделать так чтоб при наборе кода к примеру html TEST
    на странице браузера это обновлялось в релтайме КАК ЭТО СДЕЛАТЬ ОЧЕНЬ НАДО

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Gulp'у без разницы что ты используешь.
      Если файл сохраняется - Gulp это понимает и перезагружает CSS.

  • @cyberblogru
    @cyberblogru 6 років тому

    Почему же только CSS кода? Он у меня даже под bworserify хорошо работает.

  • @user-js5ly4bc9i
    @user-js5ly4bc9i 5 років тому

    У меня вопрос а нафига мне галп если она автоматически не сохраняет при изменение файлов css, html, js я изменяю файлы галп не обновляет страницу а когда я сохраняю она потом обновляет может кто то скажет как сделать так что бы она автоматически при изменения обновляла страницу или типо следила за изменением конкретных файлов...

  • @user-qq6jt1du2z
    @user-qq6jt1du2z 6 років тому +1

    как сделать, чтобы при изменении кода html срабатывала перезагрузка браузера?

    • @alexey5139
      @alexey5139 6 років тому

      var
      gulp = require("gulp"),
      livereload = require("gulp-livereload");
      gulp.task("reload-css", function() {
      gulp.src('./*.css')
      .pipe(livereload());
      });
      gulp.task("reload-html", function() {
      gulp.src('./*.html')
      .pipe(livereload());
      });
      gulp.task("default", function() {
      livereload.listen();
      gulp.watch('./*.css', ['reload-css']);
      gulp.watch('./*.html', ['reload-html']);
      });

  • @bring_you_up
    @bring_you_up 3 роки тому

    Какие-то костыли..
    использую VSC + Live Server, обновляет и html и css

  • @narek1771
    @narek1771 5 років тому

    Я в сублайм текст е загрузил плагин livereolad и он работает и с css и с html и с scss,less . JavaScript не пробовал

  • @albqst3650
    @albqst3650 6 років тому

    привет! хм не получается сделать автообновление (делал все поэтапно) использую Denwer, пытался его перезагружать но увы (лайврелоад работает коннектит)
    не подскажите в чем может быть дело?))

    • @albqst3650
      @albqst3650 6 років тому

      0_о вроде бы заработало(указал путь к файлу со стилями полностью)работает по сохранению

  • @oceanperch
    @oceanperch 6 років тому

    А как настроить Cmder чтоб был как у тебя?

  • @user-js5ly4bc9i
    @user-js5ly4bc9i 5 років тому

    И почему материал к уроку нет??

  • @user-om8vt1oj8p
    @user-om8vt1oj8p 6 років тому

    Неплохо. Но моим фафоритом все-таки останется browsersync. Не нужны никакие расширения в браузере. А если кто-то хочет реально подробно зарыться в тему галпа, поищите урок gulp для самых маленьких. Там 40 минут, а в результате вполне себе нормальная система для сборки сайта.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      BrowserSync тоже может быть настроен через Gulp.

    • @user-om8vt1oj8p
      @user-om8vt1oj8p 6 років тому

      Ну я знаю. Его преимущество на мой взгляд в том, что не нужно устанавливать расширение в браузер. Такое себе преимущество, конечно, но все-таки одним действием меньше.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Согласен, BrowserSync во многом лучше.
      Здесь основной посыл - умение работать с Gulp, чтобы люди забыли о программах типа Koala/Livereload/Prepros.

    • @user-om8vt1oj8p
      @user-om8vt1oj8p 6 років тому

      Ну как сказать... Давай откровенно. От этого ролика работать с Галпом никто не научился. Так что посыл скорее в том, чтобы заинтересовать народ в старине Галпе. Благо разбираться в нем не очень долго

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Не научился, но понял что это не сложно как минимум.
      Но вообще посыл именно в том, чтобы использовали Gulp со всеми преимуществами, а не перечисленные программы (которые еще и платные бывают).

  • @fartuh
    @fartuh 6 років тому

    Прикольно, 2 комментария всего

  • @_ualongg9143
    @_ualongg9143 6 років тому

    Вопрос.А этот же код можно использовать для автоматического обновления html?

    • @Ddddddddyu
      @Ddddddddyu 6 років тому

      хз, но попробуй скачать программу livereload, через эту программу можно перезагружать html,css,js

    • @andrewkulikovsky7354
      @andrewkulikovsky7354 6 років тому +1

      В gulpfile.js вставляешь, если все по инструкции сделано, если же другой каталог там сам уже настроишь
      var
      gulp = require("gulp"),
      livereload = require("gulp-livereload");
      gulp.task("css", function() {
      gulp.src('./src/*.css')
      .pipe(livereload());
      });
      gulp.task("html", function() {
      gulp.src('./src/*.html')
      .pipe(livereload());
      });
      gulp.task("js", function() {
      gulp.src('.src/*.js')
      .pipe(livereload());
      });
      gulp.task("default", function() {
      livereload.listen();
      gulp.watch('./src/*.css', ['css']);
      gulp.watch('./src/*.html', ['html']);
      gulp.watch('./src/*.js', ['html']);
      });

  • @64taburetki
    @64taburetki 6 років тому

    а если dreamweaver установить?

  • @khan-gu6jg
    @khan-gu6jg 3 роки тому

    это работает с html??????

  • @greg6141
    @greg6141 6 років тому

    Сделай обзор плагинов браузера

  • @jemon_D
    @jemon_D 6 років тому

    у меня происходит авто обновление только если нажать на CMD...

  • @dude247
    @dude247 6 років тому

    Почему у меня черная точка не появляется?

  • @azizxonzufarov4644
    @azizxonzufarov4644 3 роки тому

    Лучше brackets
    Включив live preview

  • @JokesSchool
    @JokesSchool 6 років тому

    что за командная строка? как ее поставить?

  • @goosenorm7252
    @goosenorm7252 6 років тому

    Курлык

  • @kilmorn4167
    @kilmorn4167 6 років тому

    после команды gulp в папке, выдает syntax Error в консоле. Файл js два раза переписывал. В чем проблема?

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Всю ошибку скинь

    • @kilmorn4167
      @kilmorn4167 6 років тому

      joxi.ru/KAx7d44H4xoV62

    • @kilmorn4167
      @kilmorn4167 6 років тому

      Пардон) нашел ошибку. В js функция в саблайме сразу закрывалась.

  • @maxwithanimals9327
    @maxwithanimals9327 6 років тому

    Помогите плиз! После того как всё написал в gulpfile.js и написал gulp в консоле выбрасывает ошибку.

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Какую?

    • @fracotti
      @fracotti 4 роки тому

      @@HowdyhoNet C:\Users\user\Desktop\Go-Code> gulp
      [17:06:43] Using gulpfile ~\Desktop\Go-Code\gulpfile.js
      [17:06:43] Starting 'default'...
      [17:06:43] 'default' errored after 13 ms
      [17:06:43] Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
      at Gulp.watch (C:\Users\user\Desktop\Go-Code
      ode_modules\gulp\index.js:31:11)
      at C:\Users\user\Desktop\Go-Code\gulpfile.js:12:10
      at taskWrapper (C:\Users\user\Desktop\Go-Code
      ode_modules\undertaker\lib\set-task.js:13:15)
      at bound (domain.js:420:14)
      at runBound (domain.js:433:12)
      at asyncRunner (C:\Users\user\Desktop\Go-Code
      ode_modules\async-done\index.js:55:18)
      at processTicksAndRejections (internal/process/task_queues.js:75:11)

    • @SnegMy
      @SnegMy 4 роки тому

      ​@@HowdyhoNet Привет. Частично решил ошибку, можешь глянуть, сойдёт, или нет? Что-то мне подсказывает, что так быть не должно.
      Если не ошибаюсь, ошибка происходит из-за апдейта до 4.0, я так до конца и не решил её, так как консоль при каждом обновлении scss файла что-то дописывает, ибо команда не завершает свою работу.
      Собственно сама ошибка, как уже многие писали, выглядит так:
      Starting 'default'...
      'default' errored after 13 ms
      Error: watching ./src/*.css: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
      at Gulp.watch (C:\Users\user\Desktop\Go-Code
      ode_modules\gulp\index.js:31:11)
      at C:\Users\user\Desktop\Go-Code\gulpfile.js:12:10
      at taskWrapper (C:\Users\user\Desktop\Go-Code
      ode_modules\undertaker\lib\set-task.js:13:15)
      at bound (domain.js:420:14)
      at runBound (domain.js:433:12)
      at asyncRunner (C:\Users\user\Desktop\Go-Code
      ode_modules\async-done\index.js:55:18)
      at processTicksAndRejections (internal/process/task_queues.js:75:11)
      Решение вымучил такое:
      const {task, src, watch, dest, parallel} = require('gulp');
      const livereload = require('gulp-livereload');
      const sass = require('gulp-sass');
      task('scss', function() {
      src('./src/*.scss')
      .pipe(sass())
      .pipe(dest('./src/'))
      .pipe(livereload());
      });
      task('render', function () {
      livereload.listen('./src');
      watch('./src/*.scss', parallel('scss', 'render'));
      });
      После этого, наконец, всё стало обновляться, но вот ниже как выгляди консоль после кажкого Ctl+S:
      $ gulp render
      [02:07:46] Using gulpfile C:\xampp\htdocs\my_projects\deleteok.local\deleteok\project\gulpfile.
      [02:07:46] Starting 'render'...
      [02:07:51] Starting 'scss'...
      [02:07:51] Starting 'render'...
      [02:07:51] C:\xampp\htdocs\my_projects\deleteok.local\deleteok\project\src\style.css reloaded.
      [02:07:54] Starting 'scss'...
      [02:07:54] Starting 'render'...
      [02:07:54] C:\xampp\htdocs\my_projects\deleteok.local\deleteok\project\src\style.css reloaded.
      [02:07:59] Starting 'scss'...
      [02:07:59] Starting 'render'...
      [02:07:59] C:\xampp\htdocs\my_projects\deleteok.local\deleteok\project\src\style.css reloaded.
      Конца и края нет.

  • @ecobuildmanagement
    @ecobuildmanagement 5 років тому

    У меня после того как gulp в консоли пишу, пишет Starting 'default' ... и всё, зависает так
    уже прошло минут 5

  • @user-gh1dd6xx6w
    @user-gh1dd6xx6w 6 років тому

    юзайте brackets и будет вам счастье))

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Довольно глупый редактор кода, особенно для винды (как и все его собратья).
      Без реально мощного железа с нормальными проектами в нём не поработаешь.

  • @user-rw4nl8qf2g
    @user-rw4nl8qf2g 6 років тому

    а что делать если livereloader не работает (нажимаю ничего не меняется, пробую не работает) и как остановить исполнение gulp скрипта в cmd (cmd не даёт ничего ввести) ?

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Ctrl+C

    • @user-rw4nl8qf2g
      @user-rw4nl8qf2g 6 років тому

      Спасибо, а по поводу liveloder'а?

    • @HowdyhoNet
      @HowdyhoNet  6 років тому

      Нужно в расширениях у livereload поставить галочку "Разрешить открывать файлы по ссылкам".
      В хроме на любую иконку расширения ПКМ -> Управление расширениями, ищите Livereload в списке и ставите эту галочку.

    • @user-rw4nl8qf2g
      @user-rw4nl8qf2g 6 років тому

      Спасибо

  • @user-um1qr5nq8p
    @user-um1qr5nq8p 6 років тому

    А без расширения не сможешь? Черт

  • @zamid
    @zamid 6 років тому

    что-то не получается

  • @1311avenue_
    @1311avenue_ 5 років тому

    node не является внутренней..
    Хотя устанавливал и скачивал

    • @1311avenue_
      @1311avenue_ 5 років тому

      Решил: установил cmder в одной папке с node.
      Теперь такая ошибка в cmder после ввода gulp
      internal/modules/cjs/loader.js:582
      throw err;
      ^
      Error: Cannot find module 'gulp-livereload'
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
      at Function.Module._load (internal/modules/cjs/loader.js:506:25)
      at Module.require (internal/modules/cjs/loader.js:636:17)
      at require (internal/modules/cjs/helpers.js:20:18)
      at Object. (C:\Users\28-07-17\Desktop\я\test\gulpfile.js:3:15)
      at Module._compile (internal/modules/cjs/loader.js:688:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
      at Module.load (internal/modules/cjs/loader.js:598:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
      at Function.Module._load (internal/modules/cjs/loader.js:529:3)
      Помогите!

  • @hellhunterxx6166
    @hellhunterxx6166 6 років тому

    хавді я хочу виучіть какуєто мову програмуваня допоможи

  • @user-rc8ch7hr3p
    @user-rc8ch7hr3p 5 років тому

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

    • @HowdyhoNet
      @HowdyhoNet  5 років тому

      Полтора миллиона просмотров на HTML за 1 час с тобой не согласятся.
      В остальном, не нравится - не смотри.
      Это лишь твоё мнение, не стоит выдавать его за объективное.

    • @user-rc8ch7hr3p
      @user-rc8ch7hr3p 5 років тому

      Вообще-то, мне нравиться. И на многие твои видео у меня стоят лайки, но как только я начинаю делать по твоему гайду сразу появляются расхождения и ничего не выходит. Либо ты рассказываешь под свою операционную систему и по этому не получается, либо что-то не так в другом. А второе что не радует это " просто берете и копируйте с гугла" а что этот код значит совершенно не важно получается. Конечно, я заметил ты не любитель разжёвывать, но от этого страдает полезность гайда и реальное понимание твоих подписчиков.

    • @awenn2015
      @awenn2015 4 роки тому

      @@HowdyhoNet как поставить этот релоад в текущих реалиях 4ого галпа?

  • @daniilvinnik4450
    @daniilvinnik4450 5 років тому

    Я твой фанат, но, извини, дизлайк. Не работает, сделал в точности как в видео, вылезает ошибка мол не найден package.json