Поиск по этому блогу

Показаны сообщения с ярлыком gulp. Показать все сообщения
Показаны сообщения с ярлыком gulp. Показать все сообщения

понедельник, 17 октября 2016 г.

Знакомимся с gulp-shell и с lodash

Можно ли вызывать с Gulp системные (консольные) команды? Здесь фрагменты кода из документации.

среда, 12 октября 2016 г.

Надо просматривать package.json и научиться обновлять основные зависимости

Например, пробую пакет hexo-theme-zurb-foundation пробую запустить gulp и получаю: Ошибка Error: libsass bindings not found. Try reinstalling node-sass? при попытке выплнения команд gulp... Пришлось перечитать docs.npmjs.com, кроме того, я нашел Troubleshooting в документации node-sass...
КА еще нахожу десятки рецептов на stackoverflow.com libsass bindings not found when using node-sass in nodejs
Оказывается, что таких же как я (чайников) очень много. Потому принимаем правило (в заголовке).

четверг, 6 октября 2016 г.

Ищу варианты jekyll -> hexo - ejs, Gulp - Panini - handlebars ? Liquid!???

Пора начинать упражнения с шаблонизаторами. Но с чего начинать. Есть hexo (ejs, swig), но выбор тем пока невелик, есть Jekyll (handlebars) с большим выбором готовых тем, но тратить время на Ruby не могу, есть Gulp Panini (handlebars), который мне очень понравился, но надо будет к hexo прикручивать плагин handlebars. Не проще ли освоить и embeddedjs, и handlebars, а потом и SWIG, jade между делом... Бааа, да в Jekyll оказывается используется Liquid... Пробую прикрутить плагин hexo-renderer-liquid Hexo, но обнаруживаю, что в Jekyll слишком много своих хелперов... Нет, проще освоить EJS... Бросаю это дело на engine.registerFileSystem Так что здесь только 15 ссылок... и обрывок кода о renderer.Engine

воскресенье, 14 августа 2016 г.

Gulp-swig c плагином Gulp, и мануал по ejs

Поймал себя на том, что мысль о собственном шаблонизаторе становится все более навзчивой. Причем, я ее гоню..., выгоняю..., а потом она приходиит ко мне под видом gulp-ejs. Оказалось, что в описании к Gulp-swig исчерпывющий набор примеров...
Так что здесь я начал было разбирать, как использовать Swig and YAML front-matter, но все оказалось очень просто, так что пост короткий.
Update: Оказалось, что в посте нет ссылки на документацию, нашел вот здесь Liquid-for-Designers... и еще есть пара ссылок в комментариях к посту.

среда, 20 июля 2016 г.

Запусаем локальный сервер Material design light и строим демо-сайт

Надеялся, что после скачивания mdl с Github достаточно вручную скомпилировать galpfile.babel.js и запустить gulp serve, оказалось, что надо еще подгрузить плагин и скопипастить файл ..., а потом выяснилось, что в новом se-gulpfile.js 934 строки, и перед запуском сервера надо выполнить несколько команд для сборки (swig, css, assets, js ). Соответвствующие командв Gulp удалось довольно быстро найти и выполнить... Сегодня мне интересно понять, как работает шаблонизатор (gulp-swig)... Об этом в следующих постах, а здесь тоолько о том, как его запустить.

934 строки из файла se-gulpfile.js (MDL)

Поскольку мне еще не раз понадобится заглянуть в gulpfile.babel.js из Material Design Light, то надо иметь под рукой его скомпилированный вариант. Так что здесь сам файл, содержание директории material-design-lite... фрагменты из файла... Templating with Swig and YAML front-matter

пятница, 24 июня 2016 г.

К скринкасту Создаем свой пайп (плагин) Gulp:9

Gulp 9: Создание плагинов при помощи through2, gulp-rev А также: manifest.json

К скринкасту Gulp 8: Обработка ошибок

Здесь разбираются модули gulp-notify, gulp-plumber, multipipe, stream-combiner2 (сктинкаст о И. Кантора)

четверг, 23 июня 2016 г.

К скринкасту о Browsersync добавим фрагменты из web-starter-kit/gulpfile.babel.js

И запомним, что вариантов gulpfile.babel.js в репозитории много. Здесь только фрагменты из master. А пост начинается с видео и кода к скринкасту Gulp 7: Browsersync... Плагины live-reload, browser-sync вставляют скрипты на html страницу. Как эти скрипты отслеживают изменения? Разбираться некогда, сначала бы опции освоить. Но на кнопку reload браузера теперь нажимть не надо. Все пересобирается само.

Конспекты к двум виедороликам о кэшированиив в Gulp

Примеры с плагинами gulp watch, since: , Gulp-changed, gulp-newer, gulp-remember, gulp-cache, gulp-cached от Ильи Кантора в скринкастах Gulp 5: Инкрементальная сборка, watch. Gulp 5: Инкрементальная сборка, повышение производительности.
В первом примере, "инкрементальность" обеспечивается за счет того, что в плагине styles данные кэшируются, а значит пересобираются заново только измененные файлы, но все это реализовано внутри styles...

среда, 22 июня 2016 г.

Конспекты к первым четырем скринкастам Gulp

Здесь видео и код к скрикастам. "Система достаточно детская, но надо же с чего-то начинать" (- Илья Кантор). А этот пост начинается ссылками на подборки статей, потом я постарался привязать примеры к видео поминутно..., а заканчиватся все фрагментами кода из двадцатиминутного ролика "Начальная сборка стилей" и последующим копипастом заголовков "Рецептов" из документации Gulp

суббота, 28 мая 2016 г.

Конспектируем статью про Gulp на Хабре и 100 комментариев к ней

И называется она Разработка → Приятная сборка frontend проекта. Пару месяцев назад я ее уже просмотрел, но не оценил..., а вчера нашел снова и прочитал с удовольствием. Почему? Потому, что сейчас я решаю задачку о том, по каким папкам мне раскладывать мои новые проекты... К статье сделано более 100 комментарие. Так что, надеюсь выделить для себя подпроцессы фронтенда с наборами инструментов под каждый процесс. Например, я пытаюсь спрогнозировать поведение заказчиков, сделал я им сайт-визитку, а они захотят добавить к неу блог, а потом окажется, что им и контент для блога нужен... С точки зрения "фронтенда", у меня должны быть заготовки шаблонов и стилей... (и движков, но это уже бэкэнд ?)... и под "визитку" и под "блог" сразу. И это очевидно... Так что здесь продолаем осваивать инструменты, и между делом устанавливаем авторские заготовки для сборки проектов.

четверг, 26 мая 2016 г.

Пробуем Metalsmith, metalsmith-base и ждем счастья - есть статьи автора и статьи последователей

Идеи автора полностью совпали с моими. Если мне нужен не движок для блога, а нечто более гибкое, то неплохо было бы: 0) Шаблонизатор на nodejs, 1)Подход к настройкам, как в Gulp 3)Примеры сборок и модулей
Пробуя шаблонизатор я обнаружил сборку metalsmith-base, в которой реализована мечта 4)Добавить шаблонизатор к Gulp, а не Gulp в шаблонизатор...
Надеюсь, что это именно то, что нужно... Здесь: Установил сборку metalsmith, и рядом metalsmith-base, поднял сервер metalsmith-base..., распечатал логи и файлы настроек... Первые опасения: слишком много предупреждений об устаревших версиях в metalsmith-base...

вторник, 3 мая 2016 г.

Смотрим видео и юзаем понты BrowserSync

Обнаружил в дистрибутиве jekyll-foundation (вроде бы) лишний сервер BrowserSync. Не понял, зачем он нужен (есть же "штатный" в Jekyll). Нашел и посмотрел видео, запустил на машине с windows... Ну да, немного понтов есть..., но так и не понял, зачем же он нужен.
А потом (в следующих постах) я обнаружил, что jekyll вообще не поддерживает windows..., в частности автоматическое обновление (штатного сервера) мне настроить так и не удалось. Так что, не исключено, что попробую его еще разок.
Здесь два видео, код для gulp.js... и еще ссылки на документацию, и на портал видеоуроков.

вторник, 5 апреля 2016 г.

Drupal 8 theming - смотрим разные видео, читаем документацию и примеры Starter Themes

В подборке из 23 видео (10-25 минут каждое) в которых автор создает новую тему... мне понравился ролик, в котором автор настраивает Drupal - подключает девелоперский файл настроек development.services.yml, в котором собраны все нужные настройки: отмена кэширования, ... подключение twig дебаггера (вывод сообщений в ferebug браузера).
Это те настройки, которые надо обязательно производить... каждый раз. Здесь же и список других видео... (Drush, css, gulp, import wp theme...). Английский белорусский, так что все понятно...
Через неделю я прочитал документацию и две статьи с Lilabout и добавил все ссылки сюда.

понедельник, 15 февраля 2016 г.

Смотрим парочку видео и устанавливаем Yeoman

Сначала видео: Конференция JSLab, образовательного проекта для IT-специалистов GeeksLab, 28.03.2015 Грибанов Александр. "Yeoman - избавляемся от рутинных задач"
"В докладе пойдет речь о современных средствах автоматизации web разработки, начиная от создания структуры проекта и заканчивая разворачиваем приложения. Рассмотрим популярные генераторы приложений и вы узнаете как написать свой
Затронем тему Grunt и Gulp, разберемся в чем разница"
Затем лог установки Yeoman

среда, 10 февраля 2016 г.

Изучаем Node.js и ставим Gulp (под windows)

Здесь подборка курсов от Ильи Кантора (javascript -> Nodejs -> Gulp... у него еще есть Курс по Angular.JS, Курс по React.JS, Курс по TypeScript ), gulp.js из его репозитория... А также сравинтельные статьи с Хабра, моя глобальнай установка...