Jade gulp: Gulp Jade — установка и настройка

Leave a Comment / Разное / By /

Автоматизация работы с Gulp | WebReference

На самом деле, в любом процессе разработки сайта вы обычно должны создать некоторый набор файлов и папок, который соответствует желаемой структуре, наиболее подходящей вашему проекту. В этом случае вы должны заботиться о сжатии и минимизации CSS и JavaScript, оптимизации изображений и куче всяких штук, которые необходимо учитывать при оптимизации сайта.

Дополнительно в процессе создания сайта происходит много часто повторяющихся действий, таких как обновление страниц для просмотра вносимых изменений. Всё это на деле утомительная и пустая трата времени. Представьте, что у вас есть система, которая делает всё это за вас. При изменении CSS-файла создаётся минимизированная версия и то же самое происходит с JavaScript-файлом. Посмотрите, что вы можете автоматически делать с помощью Gulp:

  • минимизировать CSS;
  • минимизировать JavaScript;
  • сжимать и оптимизировать изображения;
  • компилировать файлы Sass, CoffeeScript, Jade;
  • автоматически перезагружать браузер, вместо обновления вручную через F5.

Что такое система сборки?

В основном, система сборки представляет собой набор выполняемых задач (менеджеры пакетов, препроцессоры и инструменты сборки) применяемых для автоматизации частых задач в процессе разработки.

Это значит, что вам не надо самостоятельно делать компиляцию, минимизацию, оптимизацию, перегрузку, загрузку и др. Всё, что вам нужно сделать — это написать небольшой код, который будет делать работу за вас: такой код называется задачей.

Также не возникнут проблемы и при управлении фронтенд-библиотеками, вроде jQuery, Backbone, AngularJS. Вы будете использовать то, что называется менеджером пакетов, который берёт заботу на себя. Менеджер пакетов может загрузить библиотеку в папку проекта и при необходимости внедрить её в исходный код. Здорово, не правда ли!

С популярностью препроцессоров, таких как Sass, CoffeeScript, TypeScript, Jade, становится проще извлечь скрытую силу из некоторых родных языков, вроде CSS.

Таким образом, вместо написания исходного CSS вы можете использовать Sass, чтобы написать его более эффективно. После того как вы пишете CSS с помощью Sass, вы должны скомпилировать и превратить его в обычный CSS, чтобы ваш браузер мог его понять. Так что этот процесс также может трактоваться как автоматизированная задача.

Итак, после того как вы написали или пока пишите CSS с Sass, JavaScript с помощью CoffeeScript или TypeScript, а HTML с Jade, вы определяете задачи, которые будут компилировать всё это в родной язык. Вы также напишите задачи, которые будут управлять фронтенд-библиотеками, как упоминалось выше. Но одних задач недостаточно, нам нужна система для запуска этих задач, которая может сказать: «Хорошо, у меня есть работа, давай её выполним».

Вот где появляется инструмент запуска задач. Нам хорошо известно два таких инструмента: Grunt и Gulp.

В этом руководстве мы будем использовать Gulp и для этого есть причина. Вы должны знать одну вещь — Gulp не единственно доступная система сборки. Перед Gulp появился Grunt. Какое-то время Grunt был фаворитом, но по некоторым причинам люди сегодня предпочитают Gulp.

Вот основные упоминаемые причины, когда речь заходит о том, почему люди отдают предпочтение Gulp, а не Grunt:

Grunt
  • Слишком многословен.
  • Высокий порог обучения.
  • Много настроек.
Gulp
  • Быстрый.
  • Простой для обучения.
  • Приоритет кода над конфигурацией.

Итак, я собираюсь говорить о системе сборки Gulp. В случае, если вы хотели бы узнать больше о Grunt, можете пойти сюда.

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

Содержание

Ахмед Салифу Амиду

Известный как Zooboole — профессиональный веб-разработчик из Республики Ганы (Западная Африка). Пишет статьи о PHP и других технологиях.

Автор и редакторы

Автор: Ахмед Салифу Амиду

Последнее изменение: 02. 12.2019

Редакторы: Влад Мержевич

Настройка системы сборки
Ctrl+→

Создание социконок с помощью 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, если совсем упрощённо:

  1. Он наблюдает за изменениями файлов jade в папке app
  2. Конвертирует все файлы .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.

javascript — gulp.watch() не работает с нефритом

Задавать вопрос

спросил

Изменено 5 лет, 9 месяцев назад

Просмотрено 618 раз

Внезапно мой оператор gulpfile. js watch для всех моих нефритовых файлов перестал работать. Ты знаешь почему?

Нефритовая задача:

 gulp.task('нефрит', функция() {
  gulp.src('приложение/*.jade')
    .труба(нефрит())
    .on('ошибка', функция(ошибка) {
      console.log(ошибка)
      this.emit('конец')
    })
    .pipe(уменьшитьHTML())
    .pipe(gulp.dest('dist/'))
    .pipe(browserSync.stream())
})

Я также использую BrowserSync, поэтому я помещаю все свои операторы наблюдения в задачу serve , которая выглядит следующим образом:

 gulp.task('serve', ['styles', 'html', 'jade', ' скрипты'], функция() {
  browserSync.init({
    сервер: './расстояние'
  })
  gulp.watch('приложение/css/**/*.sass', ['стили'])
  gulp.watch('app/*.jade').on('change', function() {
    gulp.run(['нефрит'])
    браузерSync.reload()
  })
  gulp.watch('приложение/src/*.js', ['скрипты'])
})

Кроме того, любой другой оператор watch работает, так что я понятия не имею, что происходит. Спасибо за помощь!

  • javascript
  • node.
    js
  • глоток
  • мопс

3

Я бы попробовал две вещи.

  1. Добавить return перед gulp.src('app/*.jade') , чтобы конвейер знал, что он завершен (дополнительную информацию см. в этом вопросе)
  2. Измени свою gulp.watch для jade до gulp.watch('app/*.jade', ['jade']).on('change', browserSync.reload()) . Ваш способ кажется мне странным.

И я бы порекомендовал вам перейти с нефрита на мопса.

1

Если код не менялся, но он внезапно перестал работать, я бы проверил несколько вещей.

Если вы используете node и npm:

  • У вас есть зависимости, заблокированные в вашем package.json?
  • Обновлялись ли Jade, Gulp или browserSync?
  • Когда в последний раз вы удаляли всю папку node_modules и запускали npm install .
  • Вы меняли версии Node?

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Галерея NuGet | Retyped.

gulp-jade 0.1.6733

Продукт Версии
.NET Framework нетто40 сеть403 нетто45 сеть451 сеть452 сеть46 сеть461 сеть462 сеть463 сеть47 сеть471 сеть472 сеть48