masad83/gulp-pure-start

Start your project with 'Gulp Pure Start' easily than ever!

Gulp Pure Start

v0.7.2

Gulp Pure Start позволяет легко и быстро начать работу над проектом с использованием сборщика Gulp.

Соответствуя основным потребностям в разработке прогрессивного веб-приложения GPS позволяет просто склонировать проект к себе, инициализировать и начать работать!

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

Что может эта сборка

• Работать с препроцессорами SASS/PUG
• Запустить локальный сервер с возможностью просмотра сайта с разных устройств одной сети
• Транспилировать ES6 код в ES5
• Минифицировать файлы
• Генерировать критические стили
• и многое другое...

Как развернуть среду для проекта

1. Скачиваем содержимое репозитория в папку проекта, команда — git clone https://github.com/nmihalyov/gulp-pure-start.git или скачиваем архив и в ручную распаковываем его
2. В папке проекта в консоли выполняем команду npm i (должен быть установлен Node.JS и NPM)
3. Когда необходимые пакеты буду установлены (может потребоваться время), инициализируем настройку проекта (опционально) командой npm init
4. Рекомендуется сначала выполнить команду gulp misc для удаления лишних файлов
5. Чтобы сразу начать отслеживание файлов и запустить локальный сервер выполните команду gulp (уже можно работать!)
6. Для загрузки популярных библиотек/плагинов и т.п. воспользуйте командой bower i Название_пакета. Возможные пакеты можно найти здесь. По-умолчанию, все библиотеки устанавливаются в dev/libs, такое поведение можно изменить в файле .bowerrc в корне проекта. (Не забудьте добавить JS файлы через libs.js!)
7. Для компиляции проекта в продакшен выполните команду gulp build

Структура

Стуктура проекта предельно проста:

• В корневой папке:
  • .babelrc — настройка транспилятора ES6
  • .bowerrc — настройка пакетного менеджера Bower
  • .eslintrc.json — настройка ESLint
  • gulpfile.js — скрипт настроек и тасков для Gulp'а
  • package.json — файл содержит информацию о проекте, авторе, а также список зависимостей
• папка dev — папка используемая во время непосредственно работы над проектом:
  • index.html — главная страница
  • manifest.json — данные веб-приложения (подробнее: здесь)
  • папка components — все компоненты проекта
  • папка css — скомпилированные стили
  • папка fonts — шрифты
  • папка img — изображения
  • папка js — скрипты
  • папка libs — сюда загружаются билиотеки через bower
  • папка pug — файлы Pug препроцессора
  • папка sass — файлы Sass препроцессора
• папка prod — папка готового проекта, которая содержит минифицированные версии файлов и не содержит файлы типа .sass/.pug
• папка node_modules — папка, содержащая зависимости проекта (появится после выполнения команды npm i)

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

Выглядит это примерно так:

И подключение компонентов для каждой реализации:

Рекомендации к использованию

Чтобы работа над проектом с Gulp Pure Start была легче и быстрее, рекомендую придерживаться следующих правил:

1. Придерживайтесь изначальной структуры файлов/папок
2. HTML файлы по умолчанию компилируются в корень dev, при необходимости можно изменить в gulpfile.js: таск pug, строка .pipe(gulp.dest('dev'))
3. Все библиотеки устанавливаются в dev/libs. Также можно изменить в .bowerrc. Для их подключения используйте файл js/libs.js c директивой @@include (напр. @@include('../libs/jquery/dist/jquery.js')), точно также можно импортировать несколько файлов JS в один результирующий для более удобной архитектуры (eсли вам надо подключить SASS/CSS, то подключайте их в _libs.sass (который нужно импортировать в style.sass или подключать библиотеки сразу в нём)
4. По-умолчанию из SASS-файлов компилируется только style.sass, остальные файлы стилей следует импротировать в него, или заменить строку таска sass return gulp.src('dev/sass/style.sass') на return gulp.src('dev/sass/*.sass')
5. В верстку стоит подключать минифицированные файлы — style.min.css/common.min.js/libs.min.js, т.к. именно они попадают затем в билд!
6. Существует шаблон Pug для более быстрого старта - dev/pug/index.pug

Патчноут

Обратная связь

Почта: nikita.mihalyov@gmail.com

Telegram: @nmihalyov

ВКонтакте: vk.com

Или написать Issue