• entries
    10
  • comments
    0
  • views
    6,166

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

klierik

646 views

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 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Who's Online   0 Members, 0 Anonymous, 40 Guests (See full list)

    There are no registered users currently online



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

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors