ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

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


Сейчас в интернете существует большое число различных сборщиков и подходов к ней, и каждый выбирает для себя что-то по вкусу. Я только опишу вам один из многих подходов, а вы уже решите сами, подходит он вам или нет.

Как уже все догадались, речь пойдет о сборщике под названием Gulp.

Скажу сразу, что у вас  должен быть установлен Node.js. У кого не установлен, то вам сюда https://nodejs.org/en/download/

Итак, приступим:

Откроем консоль и создадим папку

mkdir nebo15

Зайдем в папку, которую только что создали

cd nebo15/

запустим команду инициализации проекта:

npm init

Заполняйте поля теми данными, которые вы знаете, остальные просто пропускайте, нажав Enter. На выходе получим что-то наподобие этого:

{
  
"name": "nebo15",
 
"version": "1.0.1",
 
"description": "first gulp project",
 
"author": "stranger",
 
"license": "MIT",

  "main": "main.js",
  
"dependencies": {
     
"gulp": "^3.9.0"
   }
}

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

Основные плагины, с которыми я хочу вас познакомить:

gulp-minify-css — нужен для минимизации CSS кода, создаст один файл *.min.css

gulp-uglify — будет минимизировать наш JS, создаст один файл *.min.js

gulp-autoprefixer — авто-добавление добавляет вендорные префиксы (-webkit, -o, -moz) к CSS свойствам, нужно чтобы ваш код поддерживался во всех браузерах.

browser-sync — понадобится  для запуска локального сервера.

gulp-sass — предназначен для компиляции SCSS и SASS кода.

gulp-sourcemaps — предназначен для генерации css sourscemaps, которые понадобятся при отладке кода

//= footer.html   эти комментарии будут заменены на код с файла при компиляции

gulp-watch — предназначен для отслеживания за изменениями файлов.

rimraf —  для очистки папок по завершению сборки (rm -rf для nodejs).

После установки всех плагинов у нас будет файл package.json:

делается это при помощи команды

npm install name_of_package --save-dev 

где --save-dev означает то, что пакет будет остановлен в проект, а не глобально. Для глобальной установки используйте тег -g.

Bower

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

Давайте поставим его в наш проект. Для установки напишем в консоли:

bower init

Заполняйте поля те, что знаете, остальное пропускайте. В конце вы получите файл bower.json:

{
 
"name": "nebo15",
 
"version": "1.0.0",
 
"authors": [
   
"Dima"
  ],
 
"license": "stranger",
 
"ignore": [
   
"**/.*",
   
"node_modules",
   
"bower_components",
  ],

"dependencies": {
   
"normalize.css": "*",
   
"jquery": "2.*"
}

Установим пакеты с dependencies:

bower i

Давайте создадим базовую структуру и настроим сборку нашего проекта.

 

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

Сначала нужно 2 папки. Первая (src), в которой мы собственно будем писать код, и вторая (build), в которую сборщик будет собирать файлы.

 Текущая структура у нас выглядит так:

В src создали типичную структуру для проекта. Сделаем main файлы в папках js/ и style/ и создадим стартовую index.html страничку такого содержания.

index.html



Структура папки src теперь будет выглядеть так:

Тут все просто:

fonts —папка с шрифтами

img — папка с картинками

js — папка со скриптами. Тут в корне - main.js, а рабочие файлы в папке partials

style — папка со стилями. Тут в корне - main.scss, а рабочие файлы в папке partials

template — тут будем хранить  html код

Все html страницы, которые мы верстаем, будут лежать в папке src

Gulpfile.js

Итак, начнем, сначала подключим все зависимости в этот файл.

gulpfile.js

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

Веб сервер

Чтобы иметь livereload, нам необходимо написать себе веб-сервер. Для этого напишем следующую таску

:

Сборщик для html

Напишем таску для сборки верстки html

Стоить вспомнить, что rigger - плагин, позволяющий использовать конструкцию для подключения файлов:

//= template/footer.html

В папке src/template/  создадим файлы header.html и footaer.html

В папку header.html поместим

В папку footer.html поместим

а файл index.html отредактируем соответственно так:



Запускаем сборку следующей командой

gulp html:build

После того, как она соберется, переходим в папку build и увидим там наш файл index.htm

l

Сборщик для JS

Таска для сборки скриптов будет примерно такая

Зададим структуру для main.js:

Запустим сборку js:

gulp js:build 


И в папке build/js  можно увидеть скомпилированный и модифицированный файл.

Сборщик для стилей

Таска для сборки SCSS:

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

Запустим нашу таску

gulp style:build

Теперь давайте определим таску с именем «build», которая будет запускать все:

Отлеживаем изменения в файлах

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

Понять это просто. Просто при изменениях какого-то файла происходит пересборка проекта.

Попробуйте запустить в консоли:

gulp watch

Измените что-то в проекте и увидите, что произойдет.

Очистка

Если вы прикрепите большую библиотеку, потом запустите задачу js:build и потом решите, что она вам больше не нужна и удалите ее, то она все равно останется в папке проекта build. Так что было бы удобно периодически удалять ее содержимое. Создадим для этих потребностей простую таску

Теперь, запуская команду с консоли

gulp clean

папка build будет удаляться.

Напоследок

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

gulp.task('default', ['build', 'webserver', 'watch']);

Запустим в консоли

gulp

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

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

КОМЕНТАРИИ И ОБСУЖДЕНИЯ

ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$