7 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Ещё один пост о сборке front-end проекта

Ещё один пост о сборке front-end проекта

Я потратил прилично времени на структуризацию и автоматизацию сборки фронта. Задача это интересная и стоит того, чтобы о ней рассказать.

Что умеет делать сборщик:

  • Собирать front-end проект для development & production окружений.
  • Собирать по несколько js/css бандлов на проект.
  • Использовать стиль CommonJS модулей в браузере.
  • Использовать ES6-синтаксис.
  • Спрайты, картинки и многое другое.

Вступительное

Чтобы было удобней следить за мыслью, сразу кидаю ссылку на репозиторий с шаблоном проекта: github.com/alexfedoseev/js-app-starter

Убедитесь, что установлен npm.

Установите необходимые глобальные модули (если ещё не установлены):

Сделайте форк репозитория.

Установите зависимости проекта (исполнять в корне репозитория):

Соберите проект в development окружении и запустите локальный сервер:

Откройте браузер и перейдите на lvh.me:3500

В качестве сборщика будем использовать Gulp.
Что включает процесс сборки и какие технологии используются:

  • Сборка HTML
    Шаблонизатор: Jade
  • Сборка CSS
    Препроцессор: Stylus
    Префиксер: Autoprefixer
  • Сборка JS
    Модульная система: Browserify + Babel (ES6 transpiler)
    Проверка качества кода: jsHint
  • Оптимизация изображений
    Оптимизатор: Imagemin
  • При необходимости: сборка спрайтов, обработка json, копирование фонтов и прочих файлов в public папку
    Сборщик спрайтов: Spritesmith
    Обработка json: gulp-json-editor

Вобще я люблю Slim и Sass, но Ruby к Ruby, a JS к JS: для frontend-проекта будем использовать только штуки из npm. При желании любой инструмент можно заменить.

Структура проекта

.gitignore & .npmignore
Внутри этих файлов находится список того, что будет игнорироваться git и npm при коммитах/паблишах.

node_modules/
В эту директорию падают все модули, которые мы установим через npm.

npm-shrinkwrap.json
Я не держу в репозитории содержимое node_modules/. Вместо этого лочу все зависимости через этот файл. Он генерируется автоматически командой: `npm shrinkwrap`.

Читать еще:  Ошибка 0x80070643 при установке обновлений в Windows 10 – как исправить?

package.json
Это файл с глобальными настройками проекта. К нему ещё вернемся.

gulpfile.js
Обычно тут хранятся все таски для сборки проекта, но в нашем случае он просто определяет значение переменной окружения и пробрасывает нас дальше в папку с gulp-тасками.

lib/gulp/
Здесь храним все настройки и задачи сборщика.

|— config.js
Выносим настройки для всех тасков в отдельный файл, чтобы минимизировать правку самих тасков.

|— helpers/
Вспомогательные методы сборщика.

|— tasks/
И сами gulp-таски.

src/
Исходники проекта.

public/
Результат сборки. Абсолютно всё содержимое этой папки генерируется сборщиком и перед каждой новой сборкой она полностью очищается, поэтому тут никогда и ничего не храним.

dist/
Иногда я пишу opensource-модули. В этой папке после сборки оказываются обычная и минифицированная версии написанной js-библиотеки. При этом директория public/ используется как хранилище для демки. Если вы делаете обычный сайт или страницу приземления, то оно не понадобится.

Настройка проекта

package.json

Это файл, в котором хранятся глобальные настройки проекта.
Подробное описание его внутренностей можно посмотреть тут: browsenpm.org/package.json
Ниже я остановлюсь только на некоторых важных частях.

Консольные команды

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

Development сборка
Перед началом работы с проектом нам нужно:

  • собрать его из исходников (с sourcemaps для дебага)
  • запустить «наблюдателей», которые будут пересобирать проект при изменении исходных файлов
  • запустить локальный сервер

Production сборка
Когда мы готовы релизить проект — делаем production-сборку.

Переходим к Gulp. Структура тасков взята из сборщика от Dan Tello.

Перед тем, как нырнуть, небольшой комментарий по порядку выполнения обычного gulp-таска:

Теперь разберемся что и в каком порядке будем собирать.

Читать еще:  Dropbox – что это за сервис и как им пользоваться

Development сборка
`npm start` запускает команду `gulp`. Что происходит дальше:

    Gulp ищет в текущей директории gulpfile.js. Обычно в него складываются все таски, но здесь он просто определит значение переменной окружения и пробросит нас дальше в папку с gulp-тасками.

  • После того, как нас пробросило в директорию, сборщик ищет таск с названием `default`, который сначала запускает «наблюдателей» над исходниками, потом:
    • очищает папки `public/` & `dist/`
    • линтит js-файлы
    • и собирает спрайты

    После этого собирается проект (html, css, js и всё остальное).

    default

    watch

    build

    Production сборка
    С ней всё проще. `npm run build` запускает команду `gulp build`, которая очищает целевые папки, линтит js-код, собирает спрайты и после этого собирет проект (без sourcemaps). Код с комментариями выше.

    Файл конфигураций gulp-тасков

    Все основные конфигурации тасков вынесены в отдельный файл lib/gulp/config.js:

    Сборка HTML

    Для шаблонизации используем Jade. Он позволяет делать вставки партиалов, использовать inline-javascript, переменные, миксины и ещё много разных крутых штук.

    Конфиг

    Структура папки src/html

    Все партиалы снабжаем префиксом `_` (нижнее подчеркивание), чтобы при сборке мы могли их отфильтровать и игнорировать.

    helpers/_variables.jade
    Сохраняем необходимые параметры в переменные. Например, если у нас телефон стоит в нескольких местах страницы, то его лучше сохранить в переменную и в шаблонах использовать именно её.

    helpers/_mixins.jade
    Часто используемые блоки можно обернуть в mixin.

    index.jade
    Скелет главной страницы.

    meta/_head.jade
    Содержимое head.

    Сборка JavaScript

    В качестве модульной системы используем Browserify. C ним мы можем использовать стиль подключения CommonJS модулей непосредственно в браузере. Кроме этого мы теперь можем использовать ES6-синтаксис: Babel преобразует его в ES5 перед тем, как Browserify соберет js. И перед сборкой мы проходимся jsHint для проверки качества кода.

    Читать еще:  Обзор смартфона Huawei Y6II: ударим старой начинкой по новым конкурентам! Когда надо обновить прошивку

    У Browserify есть один минус: если вы пишете библиотеку с внешними зависимостями (например jQuery-плагин), то он не сможет сделать правильную UMD-обертку. В этом случае я заменяю Browserify на конкатенацию и пишу обёртку руками.

    На проекте может возникнуть необходимость формировать несколько наборов js/css.

    Например вы пишите фронт + админку. Или библиотеку в 2 вариантах: без зависимостей и в формате jQuery-плагина. Эти сборки нужно разделять. Для этого в настройках сборщика мы создаем массив:

    js/css cборщики будут искать в папке с js/css исходниками соответствующий end-point файл (`app.js` или `app.styl`). Через этот end-point файл мы управляем всеми зависимостями бандла. Их структуру я покажу чуть ниже.

    Перед передачей бандлов сборщику, мы предварительно пропускаем массив через хелпер `bundler`, который формирует объект с настройками.

    Конфиг

    Структура папки src/js

    app.js
    Через этот файл мы рулим всеми зависимостями и порядком исполнения js-компонентов. Имя файла должно совпадать с именем бандла.

    В таких случаях используем browserify-shim: плагин, который позволяет превращать обычные библиотеки в CommonJS-совместимые модули. Итак, у нас есть jQuery-плагин `maskedinput`, которого нет в npm.

    Добавляем в `package.json` преобразование и выставляем настройки для зависимости:

    После этого мы можем подключать модуль:

    Сборка CSS

    В качестве препроцессора используем Stylus. Плюс проходимся по css автопрефиксером, чтобы не прописывать вендорные префиксы руками.

    Конфиг

    Структура папки src/css

    app.styl
    Через этот файл мы рулим порядком подключения css-компонентов. Имя файла должно совпадать с именем бандла.

    Все остальные таски — картинки, спрайты, очистка и пр. — не требуют дополнительных комментариев (на самом деле я просто устал уже строчить). Исходники лежат в репозитории: github.com/alexfedoseev/js-app-starter

    Если есть косяки или дополнения — буду рад обратной связи через комментарии тут или issues / pull requests на Github. Удач!

  • Ссылка на основную публикацию
    Статьи c упоминанием слов:
    Adblock
    detector