Создание социконок с помощью Gulp, stylus, bower, font-awesome, yeoman MODX
Создание рабочей папки проекта с помощью Yeoman
Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.
При успешном запуске Yeoman у вас должна получится такая картинка:
После выполнения этих команд у вас получится приблизительно такая структура:
Запустим Gulp командой:
gulp serve
Остальные команды вы можете просмотреть в файле .gulpfile.
При успешном запуске у вас должна получится следующая картинка:
кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:
Перейдём к нашему главному шаблону app/index.
jade и вставим туда код для социконок, у меня получился такой:
Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:
- Он наблюдает за изменениями файлов jade в папке app
- Конвертирует все файлы .jade в .html, сжимает и передаёт их в папку dist
Установка и подключение Font-awesome
Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:
bower install font-awesome
Укажем стили в index.jade:
После этого в браузере у вас должны отобразится иконки:
Создание стилей с помощью Stylus
В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:
Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.
В результате этого должны получится вот такие иконки:
Код для вставки в ваш сайт можете найти в dist/index.html и dist/styles/main.css
Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:
Демо можете увидеть внизу на этом сайте. Как обычно — не стесняйтесь задавать вопросы и давать замечания в комментариях.
14-01-2016 Frontend Yeoman Gulp Виктор МатушевскийСоздание SVG спрайтов с помощью Gulp… Введение в PostCSS
Please enable JavaScript to view the comments powered by Disqus.Автоматизация фронтенда — сегодня и завтра
Автоматизация фронтенда — сегодня и завтраРоберт Харитонов, Одноклассники
Front-end Dev Conf, Минск, 2014
Web Standards Days, Рига, 2014 + мастер-класс по автоматизации в Риге и в Киеве
Автоматизация фронтенда
сегодня и завтра
Роберт Харитонов
Спасибо,
Родной инструмент
- Низкий порог вхождения
- Бешеная популярность JavaScript
- Огромное сообщество
источник
Автоматизируй все!
- Производительность
- Проверка кода
- Пре/пост-процессинг
- Тестирование
- Разработка
Машины должны
страдать!
Пока мы строим веб
Grunt JS
И его 2500+ плагинов
Не Грантом едины
Task Runners
- Grunt — это конфиг
- Gulp — API
- Brunch
- Будущее с node-task
Все уже сделано за вас,
берите и используйте.
Производительность
Первым делом
- Компрессия CSS, HTML, JS
- Спрайты — Smart Sprites, Spritesmith, SVG
Графика
- Imagemin, только по измененным файлам
- SVGO
CSS
- Умные компрессоры, как CSSO
- Объединение Media Query
- Чистка лишнего CSS и JS
- + CSSCSS для проверки дублированных свойств
Как мерять
Помимо статистики с пользователей:
- Google PageSpeed + Grunt
- Тесты c PhatnomJS или Selenium
- Скриншоты загрузки на медленных соединениях
- Сравнение веса ресурсов
Что еще
Анализ используемых модулей и предзагрузка
c БЭМ-подобными экосистемами.
источник
Проверка кода
Анализируем все
- JS Lint, Hint и сразу таблетка
- CSS Lint
- HTML inspector
- Валидаторы стандартов, Coffee, Less, SCSS, JSON, jQuery
Это еще не все
Проверяем Доступность:
- Aria linter
- Проверка на WCAG стандарты
Немного помечтаем
- Автопроверка по списку требований
- Набор скриншотов с браузеров
- Проверка code style (частично в html-inspector)
*-процессинг
Что у нас есть
- SASS, LESS, Stylus
- Slim, Jade, EJS
- Coffee
- ES6 Shim
- Rework!
Rework
CSS парсер
Обработка
Компилятор
CSS
Rework
- Autoprefixer
- Myth — CSS-полифил
- Будущее за постпроцессингом
HTML и JS
BEM
- Автоматизация с акцентом на сущности
- Стандартные модули интерфейсов
Тестирование
Тестирование
- Юнит тестирование
- Тестирование производительности
- Функциональное тестирование
Функциональное тестирование
- Selenium
- Веб сервисы
- Dalek.
js
jsДемонстрация работы Dalek.js
Что бы посмотреть видео, откройте, пожалуйста, презентацию в браузере с поддержкой .mp4 или .webm.
Monkey testing
gremlins.js
Разработка
Быстрый старт
Harp
- Сервер
- Препроцессинг всего и EJS partials
- Билд
Пример проекта с Harp
Harp
- Harp express middleware
- harp.io — хостинг с деплоем из Dropbox
- Быстрой вывод в сеть с Finch (или ngrok)
Скаффолдинг
Yeoman
- На основе Yo, Grunt, Bower
- 600+ готовых генераторов
- Как написать свой генератор
Демонстрация работы yo
Что бы посмотреть видео, откройте, пожалуйста, презентацию в браузере с поддержкой .mp4 или .webm.
Зависимости
Bower – NPM для клиентского JS
bower initbower install jquerybower install https://github.
com/foo/bar.gitbower.json
"dependencies": {
"jquery": "~2.1.0",
"font-awesome": "~3.1.1"
}Bower
- Bower + google-cdn
- Обновить зависимости до последней версии
Настройка среды
- Автоустановка NodeJS и зависимостей из NPM
- Vagrant
Vagrant
vagrant init your-environmentvagrant upvagrant ssh
Машины должны
страдать!
Автоматизация фронтенда
Роберт Харитонов, Одноклассники
- @operatino
- toHTML.it
- Мастер-класс в Риге — bit.ly/riga-automation
Слайды презентации — rhr.me/pres/automation
Стилус | AppCode
AppCode позволяет переводить код Stylus в CSS на лету.
Перед началом работы
Убедитесь, что на вашем компьютере установлен Node.
js.Установите и включите плагин File Watchers в меню «Настройки | Страница плагинов, вкладка Marketplace, как описано в разделе Установка плагинов из репозитория JetBrains.
Убедитесь, что в настройках включен плагин Stylus. Нажмите ⌃ ⌥ S , чтобы открыть настройки IDE и выбрать Плагины. Перейдите на вкладку «Установлено». В поле поиска введите Stylus. Дополнительные сведения о подключаемых модулях см. в разделе Управление подключаемыми модулями.
js.Установка стилуса
Во встроенном терминале ( ⌥ F12 ) введите:
npm install — официальный сайт global stylus3 900.
Компиляция кода Stylus
Для автоматической компиляции кода вам необходимо настроить Stylus File Watcher, который будет отслеживать изменения в ваших файлах и запускать компилятор.
Когда вы открываете файл, AppCode проверяет, доступен ли в текущем проекте применимый File Watcher. Если такой File Watcher настроен, но отключен, AppCode отображает всплывающее окно, которое информирует вас о настроенном File Watcher и предлагает включить его.
Если соответствующий File Watcher настроен и включен в текущем проекте, AppCode запускает компилятор автоматически при наступлении события, указанного в диалоговом окне New Watcher.
Если установлен флажок Автоматически сохранять отредактированные файлы для срабатывания наблюдателя, наблюдатель за файлами вызывается, как только в исходный код вносятся какие-либо изменения.
Если флажок Автосохранение отредактированных файлов для срабатывания наблюдателя снят, при сохранении запускается наблюдатель файлов (Файл | Сохранить все, ⌃ S ) или при перемещении фокуса с AppCode (при деактивации кадра).
Узнайте больше от File Watchers.
AppCode создает отдельный файл со сгенерированным выводом. Файл имеет имя исходного файла Stylus и расширение .css. Расположение сгенерированных файлов определяется в поле Выходные пути для обновления диалогового окна Новый наблюдатель. Однако в дереве проекта они отображаются под исходным файлом, который теперь отображается как узел.
Создать наблюдателя за файлами
В диалоговом окне «Настройки» ( ⌃ ⌥ S ) нажмите «Следопыты за файлами» в разделе «Инструменты».
На открывшейся странице File Watchers отображается список уже настроенных File Watchers.Щелкните или нажмите ⌘ N и выберите из списка предопределенный шаблон Stylus.
В поле Программа укажите путь к исполняемому файлу:
Введите путь вручную или нажмите и выберите расположение файла в открывшемся диалоге.
Действуйте, как описано в File Watchers.
На открывшейся странице File Watchers отображается список уже настроенных File Watchers.Настройка подсветки синтаксиса
Вы можете настроить подсветку синтаксиса с поддержкой стилуса в соответствии со своими предпочтениями и привычками.
В диалоговом окне «Настройки» ( ⌃ ⌥ S ) выберите «Редактор | Цветовая схема | Стилус.
Выберите цветовую схему, примите настройки выделения, унаследованные от значений по умолчанию, или настройте их, как описано в разделе Цвета и шрифты.
Last modified: 09 August 2022
Stylelint Tailwind CSS
【今更】pugとstylusとbabelをgulp — Qiita
VonageコミュニケーションAPIにまつわる記事投稿で豪華プレゼントがもらえる🎁 Qiita Advent Calendar 2022開催中！
Помогите разобраться в проблеме. В чем проблема?
Это нарушение правил сообщества
Это незаконно
Это социально неприемлемо
Это спам
информация
С момента последнего обновления прошло более 3 лет.
@sosukesuzucuki
Опубликовано по адресу
Продать
Javascript, Stylus, Gulp, Babel, Pug
鈴木。 の と ある 団体 団体 団体 団体 団体 団体 団体 団体 団体 団体 団体 団体 団体 ある ある ある ある ある 団体ですが、HTMLとCSSとJSを素で書くなんて絶対したくないので、しない方法です。
インストール
npmよりпряжаの方が好きなので、пряжаを使います。
пряжа init пряжа добавить --dev gulp gulp-pug gulp-stylus gulp-babel babel-preset-env browser-sync gulp-notify gulp-plumber nib
関連パッケージをインストールします。
| パッケージ | 役割 |
|---|---|
| залпом | タスクランナー |
| глоток-мопс | глотокでpugをhtmlにする |
| стилус для глотка | глоток, стилус, CSS, |
| глоток-бабель | глотокでbabelを使う |
| предустановленная вавилонская оболочка | вавилонのトランスパイルする環境を設定する |
| синхронизация с браузером | 変更を検知した時にブラウザーに自動で反映させる |
| проглотить-уведомить | エラーが起こった時にデスクトップ通知を行う |
| глоток-сантехник | エラーをハンドリングする時に使う |
| наконечник | стилусでmixinとかの便利機能を使えるようにする |
設定を書く
とりあえず .
babelrc
.babelrc
{
"предустановки": [
["окружение", {
"цели": {
"браузеры": ["последние 2 версии", "safari > = 7"]
}
}]
]
}
babel-preset-envを使います。babel-preset-envについてはドキュメントを読んでください。
次に gulpfile.js 。
gulpfile.js
const gulp = require('gulp')
постоянный стилус = требуется ('gulp-стилус')
const babel = требуется ('gulp-babel')
const pug = требуется ('gulp-pug')
константный наконечник = требуется ('перо')
const водопроводчик = требуется ('gulp-сантехник')
const browserSync = требуется('браузер-синхронизация')
const notify = require('gulp-notify')
gulp.task('по умолчанию', ['стилус', 'синхронизация с браузером', 'мопс', 'часы', 'вавилон', 'img'])
gulp.task('смотреть', () => {
gulp.watch(['./stylus/**'], () => {
gulp.start(['стилус'])
})
gulp.watch(['./pug/**'], () => {
gulp.start(['мопс'])
})
})
gulp.task('браузер-синхронизация', () => {
БраузерСинхронизировать({
сервер: {
baseDir: '. /dist/'
}
})
gulp.watch('./dist/js/*.js', ['перезагрузка'])
gulp.watch('./dist/*.html', ['перезагрузка'])
gulp.watch('./dist/css/*.css', ['перезагрузка'])
gulp.watch('./dist/img/*.*', ['перезагрузка'])
})
gulp.task('стилус', () => {
gulp.src('./stylus/*.styl')
.труба(сантехник({
errorHandler: notify.onError("Ошибка: <%= error.message %>")
}))
.pipe (стилус ({
импорт: ['перо'],
использовать: [перо()]
}))
.pipe(gulp.dest('./dist/css'))
})
gulp.task('мопс', () => {
константная опция = {
красивая: правда
}
gulp.src('./мопс/*.мопс')
.труба(сантехник({
errorHandler: notify.onError("Ошибка: <%= error.message %>")
}))
.pipe (мопс (опция))
.pipe(gulp.dest('./dist'))
})
gulp.task('Вавилон', () => {
gulp.src('./js/**/*.js')
.труба(сантехник({
errorHandler: notify.onError("Ошибка: <%= error.message %>")
}))
.pipe(вавилон())
.pipe(gulp.dest('./dist/js'))
})
gulp.task('перезагрузка', () => {
браузерSync.
/dist/'
}
})
gulp.watch('./dist/js/*.js', ['перезагрузка'])
gulp.watch('./dist/*.html', ['перезагрузка'])
gulp.watch('./dist/css/*.css', ['перезагрузка'])
gulp.watch('./dist/img/*.*', ['перезагрузка'])
})
gulp.task('стилус', () =>