• записей
    10
  • комментариев
    0
  • просмотров
    2698

1.3 Среда разработки проекта. Руководство верстальщика

klierik

319 просмотров

1 Технические требования к среде разработки

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

По мере того, как вес веб-страницы в реалиях соверменного мира растёт, в выиграше остаются те, у которых вес и скорость загрузки страниц меньше, чем у конкурентов. Мы создадим инструмент, который позволит "не лету" обрабатывать и оптимизировать наш код,  уменьшая его в размере и времени загрузки.

1.1 Node.js

Для сборки проекта нам понадобится установленный Node.js версии LTS (на момент публикации данной статьи версия node.js — 8.11.1). В качестве менеджера версий использовался nvm

Когда оба ПО установленны выполняем в терминале следующую команду

$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v8.11.1...
Downloading https://nodejs.org/dist/v8.11.1/node-v8.11.1-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v8.11.1 (npm v5.6.0)

И в итоге будет использованна актуальная LTS версия Node.js

1.2 GulpJS

В качестве сборщика в данном обучении будет использоватся GulpJS. Данный инструмент выбран как наиболее подходящий для данной задачи.

В следующей статье разговор пойдёт о создании сборщика. Я настоятельно рекомендую посмотреть замечательный Cкринкаст по GulpJS что бы понимать в будущем что мы будем делать и как это работает.

Скрытый текст

 

После уставки Gulp локально и глобально их версии, на момент публикации данной статьи, были следующие:

$ gulp -v
[20:16:35] CLI version 2.0.1
[20:16:35] Local version 3.9.1

2. Организация структуры файловой системы

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

Так как в рамках задачи нам следует создать только вёрстку, без её интеграции в серверный код, наша структура будет достаточно простая:

.
├── assets/			- ресурсы
│   ├── images/			- картинки
│   ├── js/			- js-скрипты проекта
│   └── scss/			- стили проекта
├── .gitignore			- список ресурсов, которые не следует добавлять в GIT
├── gulp/
│   ├── .csscomb.json		- файл настроек cssComb
│   ├── .eslintrc 		- файл настроек eslint https://goo.gl/4K6TyF
│   ├── config.js		- файл настроек задач и пакетов Gulp
│   └── tasks/			- задачи Gulp
├── gulpfile.js			- основной файл конфигурации Gulp
├── node_modules/		- npm пакеты
├── package-lock.json
├── package.json		- файл, в котором описана информация о проекте и версиях пакетов, которые используются в проекте
├── public/			- директория, в которую будут генерироватся обработанные/сжатые ресурсы
└── templates/			- html шаблоны

3. Структура HTML файлов

За основу типичного html-файла взят пример от Bootstrap, описанный в документации:

Скрытый текст

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

 

Все html-файлы в данном материала так или иначе будут основыватся на эту структуру.

Добра и удачи 🙏



0 комментариев


Рекомендованные комментарии

Нет комментариев для отображения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
  • Сейчас в сети   0 пользователей, 0 анонимных, 83 гостя (Полный список)

    Нет пользователей в сети в данный момент.

  • Пишут сейчас

    • Есть несколько вариантов которые позволяют развиваться профессионально: Ask friend for help. Опросить друзей знакомых на предмет предлагаемых услуг, заявить о себе. Выполнить несколько простых проектов для опыта/портфолио. Тем самым продвигать себя в качестве специалиста (сарафанное радио) Freelance. Вход сложный. Зато на мелочах можно поднять опыт за символическую стоимость. Потом развивать свой аккаунт, "обрастать" клиентами и поднимать уровень квалификации. Важно: почитайте пару гайдов как получить заказ новичку, как оформить профиль и прочие рекомендации. Сайты по теме: https://freelansim.ru https://www.fl.ru https://www.upwork.com — я бы выбрал этот Remote. Full-time. Ещё один хороший вариант найти работу — утроится в компанию работать удалённо. Без территориально ограничения. Компания может быть из СНГ, с юр. лицом. Заключаете договор и сотрудничаете на ставку. Part-time. Тоже самое что и предыдущий пункт но формат сотрудничества на правах почасовой работы. Office. Работа в офисе на позции Junior с перспективой роста. Хорошо подойдут галеры по типу ЕПАМ, Ciklum, LuxSoft, и тд. Денег мало (в начале), но компенсируется опытом. За 9-12 месяцев можете вырасти в Middle. Дальше плыть будет легче. Для поиска работы для Remote и Office вариантов можно использовать стандартные инструменты, на пример: djinni.co или linkedin.com. Рекомендации к заполнению профилю/CV Опишите всё что можете предложить заказчику. Расскажите о своих скилах, что непосредственно Вы делали выполняя работу над тем или иным проектом. Расскажите о своём опыте, даже если он не значительный. Если опыта совсем мало, инвестируйте месяц-два и выполните несколько простых задач, которые Вы сможете показать заказчику. И профиль и CV должно быть на английском языке, в первую очередь, и лишь копия русскоязычная (у меня такой нет, так как рынок предполагает знание английского языка с уровня pre-intermediate)
    • Сидеть дома и развиваться до уровня Senior годами без реальной работы?! 
    • Факт есть факт — специалистов как было мало так и осталось. Можно выбирать любую интересующую себя нишу и развиваться в ней до уровня Senior и иметь на себя спрос в последствии.
  • Лучшие авторы

  • Текущие цели пожертвований