webdesignchannel/optimize-html

Optimize html framework use gulp

, _(*1)

Optimize Html framework - GULP PACK

Используйте эту сборку для ускоренной верстки сайтов. Gulp pack - Включает в себя минификацию изображений, js, css, а также компиляцию из sass в сss. Все изменения автоматически отслеживаются браузером., _(*2)

СТРУКТУРА ПРИЛОЖЕНИЯ

  app/             Рабочая папка
  prod/            Папка для продакшена (по умолчанию не создана). Создается после выполнения команды gulp production
  package.json     Зависимости
  yarn.lock        Служебный файл для проверки целостности
  gulpfile.js      Файл настроек

УСТАНОВКА НЕОБХОДИМОГО ПО

Перед использованием gulp pack необходимо установить node.js, а также yarn - быстрый и надежный пакетный менеджер.

Установите node.js перейдя по этой ссылке, для установки пакетного менеджера yarn перейдите по этой ссылке., _(*3)

УСТАНОВКА GULP PACK ЧЕРЕЗ GIT РЕПОЗИТОРИЙ

Чтобы установить gulp pack вы можете скачать архив по ссылке или клонировать репозиторий:, _(*4)

https://github.com/webdesignchannel/optimize_html.git, _(*5)

УСТАНОВКА GULP PACK ЧЕРЕЗ COMPOSER

Установка с помощью композера:, _(*6)

composer require webdesignchannel/optimize-html:dev-master
composer create-project --prefer-dist webdesignchannel/optimize-html:dev-master

НАЧАЛО РАБОТЫ

Для установки зависимостей, откройте терминал из корня рабочей папки и введите команду:, _(*7)

yarn install

Для запуска gulp pack введите команду:, _(*8)

gulp watch

Для запуска gulp pack для продакшена введите команду:, _(*9)

gulp production

ОБНОВЛЕНИЕ ПАКЕТОВ

Для обновления всех пакетов используйте команду:, _(*10)

yarn upgrade

Для обновления определенного пакета используйте команду:, _(*11)

yarn upgrade [package]@[version]

НАСТРОЙКА LIVE RELOAD

Для запуска live reload на локальной машине, в файле gulpfile.js в таске (liveReload) замените конструкцию:, _(*12)

server: {
    baseDir: "app"
}

На следующую конструкцию:, _(*13)

proxy: "ваш локальный домен например (site.local)"