Работа над проектом

1. Создадим два макета сайта Portfolio на Figma.

макет для mobil

Сайт будет содержать 4 страницы:

Главная, О нас, Портфолио, контакты

Создаем два макета: десктоп — ширина экрана 1200px и мобильная версия 360x800px

2. Подготовим рабочее пространство

2.1 Создадим структуру папок и перенесем необходимые файлы для проекта

  1. Создать папку и вложенные папки для проекта. Возможная структура на картинке.
  2. В Visual Studio открыть папку с проектом или занести ее из проводника на рабочее поле редактора кода
  3. В папке src и во вложенных папках будут находятся все элементы для сайта .
  4. Перенести все подготовленные файлы в соответствующие папки
  5. Создать заготовки для css и html файлов.
  6. Создать простую веб страницу index.html. Для быстрого заполнения кодом в VS можно нажать Shift+!

2.2 Инициализируем проект

В VS запустить терминал (из главного меню или Ctrl+Shift+`) и выполнить инициализацию проекта:

npm init

В результате диалога будет создан файл package.json с описанием основных характеристик проекта и устанавливаемых пакетов.

2.3 Установим gulp

Команды выполняются в терминале. Формат команды для установки необходимых плагинов с помощью npm :

npm install <имя плагина>--save-dev

где

<имя плагина> — имя устанавливаемого пакета
Флаг —save-dev используется для сохранения имени и версии плагина в package.json в раздел devDependencies.

Очистить терминал можно командой clear

Для работы с gulp он должен быть установлен глобально и локально — в текущий проект.

Установка его в проект: 
npm i gulp --save-dev

После установки в папке с проектом появится папка node_modules/ в которой будут записаны пакеты установленного плагина и файле package.json будет записана информация об установленном плагине и файл package-lock.json.

Материал построен по видеоролику

 

2.4 Подготовим переменные для работы

В корневой папке проекта создать файл gulpfile.js (если проект очень большой, можно создать папку с этим именем в которой разместить несколько файлов со сценарием для gulp).

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

/* путь к папке результата и источника данных */

let project_folder = "dist";
let source_folder = "src";
/* пути к результату, источнику, наблюдению за изменениями и очистке по типам данных  */ 
let path = {
  build: {
    html: project_folder + "/",
    css: project_folder + "/css/",
    js: project_folder + "/js/",
    img: project_folder + "/img/",
    fonts: project_folder + "/fonts/",
  },
  src: {
    html: [source_folder + "/*.html", "!" + source_folder + "/_*.html"],
    css: source_folder + "/scss/style.scss",
    js: source_folder + "/js/script.js",
    img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
    fonts: source_folder + "/fonts/*.ttf",
  },
  watch: {
    html: source_folder + "/**/*.html",
    css: source_folder + "/scss/**/*.scss",
    js: source_folder + "/js/**/*.js",
    img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
  },
  clean: "./" + project_folder + "/"
}

/*
переменные для установленных плагинов. После добавления новых плагинов эта запись будет дополняться.

*/

let { src, dest } = require('gulp'),
  gulp = require('gulp');

3. Создание сервера

Подготовим инструмент для просмотра изменений нашего сайта без перезагрузки страницы с помощью плагина browser-sync В терминале выполнить: 
npm i browser-sync --save-dev
В gulpfile.js добавить: в переменные для установленных плагинов let { src, dest } добавить строку (переменные разделяются запятой, последняя запись точка с запятой): 
browsersync = require("browser-sync").create();
добавить функцию: 
function browserSync(params) {
  browsersync.init({
    server: { baseDir: "./" + project_folder + "/" },
    port: 3000,
    notify: false
  })
}
и переменные в конце документа 
    let watch = gulp.parallel(browserSync);
    
    exports.watch = watch;
    exports.default = watch;
которые связывают переменную gulp c переменными watch и default, и связанными с ними функциями Для проверки работы браузера в терминале выполнить: gulp Если отсутствуют ошибки будет открыто окно браузера с записью «Cannot GET» и терминал перейдет в режим ожидания. Ctrl+C для разрыва соединения. Запись в браузере сообщает об отсутствии данных для отображения.

4. Обработка html. Добавить header и footer в html файл.

Сформируем новую web страницу:

  1. в index.html добавим header.html и footer.html
  2. Создадим папку dist и запишем туда результат
  3. выведем новую веб страницу в браузер

 Для этого нужно установить плагин gulp-file-include, который подключает отдельные файлы компонентов в итоговые файлы.  index.html, header.html и footer.html должны иметь соответствующие данные.

  1. Установим плагин: 
    npm i  gulp-file-include --save-dev
  2. В gulpfile.js в let { src, dest } добавить переменную для связи с плагином: 
    fileinclude = require("gulp-file-include")
    а также:

добавить функцию:

function html() {
  return src(path.src.html)
    .pipe(fileinclude())
    .pipe(dest(path.build.html))
    .pipe(browsersync.stream())
}

изменить переменные build и watch:

let build = gulp.series(html);
let watch = gulp.parallel(build,  browserSync);

прописать связь:

exports.html = html;

Для того, чтобы подключить header.html и footer.html в получателе index. html добавить:

@@include('blocks/header.html')
@@include('blocks/footer.html')

В результате выполнения скрипта будет создана папка dist и в нее будут перенесены все фалы из корня папки src с расширением html в соответствии с маской: html: [source_folder + «/*.html»]
Если не нужно переносить какие то файлы нужно изменить маску, или вынести их в папку blocks

 

5. Наблюдение за изменениями проекта

Для того, чтобы браузер обновлял страницу на лету при изменении исходных данных, установим наблюдатель. Изменения будем отслеживать по данным указанным в массиве build.watch

добавить функцию:

function watchFiles(params) {
  gulp.watch([path.watch.html], html);
}
 где html - функция обработки html файлов. В дальнейшем можно наблюдать за css и js, добавляя новые обработчики:
 gulp.watch([path.watch.css], css); 
 gulp.watch([path.watch.js], js); 
или другое, можно расширить область наблюдения.
Вставка функции в сценарий выполнения: let watch = gulp.parallel(build, watchFiles, browserSync);

6. Очистка папки результата

В папке результата dist может накапливаться старая информация. Поэтому перед записью новых данных эту папку нужно удалить. Установим плагин: 
npm i del --save-dev
в переменные для установленных плагинов let { src, dest } добавить строку 
 del = require("del"),
и функцию: 
function clean(params){
   return del(path.clean);
 }

Заменим переменную построения результата  в сценарий выполнения:

let build = gulp.series(clean, html);

Сначала выполняются действия clean, затем указанные в html

7. Обработка css

Обработка стилей будет заключаться в:

  • обработке препроцессором sass исходных данных;
  • включении миксинов (для облегчения написания повторного CSS-кода.)
  • сжатия полученного css файла.

Для этого воспользуемся плагином gulp-sass и sass

(https://www.npmjs.com/package/gulp-sass)

Стили обнуления

Для сброса стилей можно применить два подхода (https://github.com/Andy-set-studio/modern-css-reset):

установить в проекте с помощью плагина:

npm install --save-dev modern-css-reset

или подключить по ссылке:

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />

 

 

  1. Установим плагин: 
    npm i  gulp-sass sass --save-dev
  2. В gulpfile.js в let { src, dest } добавить переменную для связи с плагином: 
    scss = require("gulp-sass")(require('sass')),
    а также:

добавить функцию:

function css() {
   return src(path.src.css)
  .pipe(scss({outputStyle: "expanded"}))  /* не сжатый */
  .pipe(dest(path.build.css))
  .pipe(dest(path.build.css))
 }
1 Добавить переменную: exports.css = css; 2. Вставка функции в сценарий выполнения:
let build = gulp.series(clean, gulp.parallel(css, html));
сначала выполняется clean, затем параллельно css и html
3. Добавить наблюдение в функции watchFiles:
gulp.watch([path.watch.css], css);

В результате выполнения сценария в папке dist/css запишется файл style.css

Для подключения стилей из других файлов и/или подключения миксинов в style.scss можем добавить include с указанием пути к css:

Например:

@import «blocks/mixins.scss»;
@import «blocks/header.scss»;
@import «about.scss»;

 

Дополним функцию css:

Плагин

В let { src, dest } добавить строку

1. Вендерные префиксы

npm i gulp-autoprefixer --save-dev

autoprefixer = require(«gulp-autoprefixer»),

2. Сборка и группировка медиазапросов

(отмечен как устаревший)

npm i gulp-group-css-media-queries --save-dev

group_media = require(«gulp-group-css-media-queries»),

3. Очистка и сжатие css

npm i gulp-clean-css --save-dev
clean_css = require(«gulp-clean-css»),

4. Переименование файла

npm i gulp-rename --save-dev
rename = require(«gulp-rename»),

При включении этих плагинов функция css:

 function css() {
   return src(path.src.css)
  .pipe(scss({outputStyle: "expanded"}))  /* не сжатый */
  .pipe( /* автопрефиксер  */
       autoprefixer({ 
         overrideBrowserslist: ["last 5 versions"],
       cascade: true
     })
    )
  .pipe(group_media()) /* сборка и группировка */
  .pipe(dest(path.build.css)) /* выгрузить */
  .pipe(clean_css()) /* сжать */
  .pipe(rename({extname: ".min.css"})) /* переименовать */
  .pipe(dest(path.build.css)) /* выгрузить */
 }

В результате в папке dist/css будет создано два файла style.css и style.min.css

 

8. Обработка javascript

Обработка JS будет заключаться в сборке из различных блоков и минификации результирующего файла. Минификацией JS будет заниматься плагин gulp-uglify-es

  1. Установим плагин: 
    npm i  gulp-uglify-es --save-dev
  2. В gulpfile.js в let { src, dest } добавить переменную для связи с плагином: 
    uglify = require("gulp-uglify-es").default,
    а также:

добавить функцию:

function js() {
  return src(path.src.js)
 .pipe(fileinclude())
 .pipe(dest(path.build.js)) 
 .pipe(uglify()) /* сжатие */
 .pipe(rename({extname: ".min.js"})) /* переименование */
 .pipe(dest(path.build.js)) /* выгружаем сжатый */
}

1. прописать связь:

exports.js= js;

2.изменить переменные build и watch:

let build = gulp.series(clean, gulp.parallel(js, css, html));
 
3. Добавить наблюдение в функции watchFiles:
gulp.watch([path.watch.js], js);

В файле index.html добавляем

<script src=»js/script.js»></script>
После выполнения gulp в папке dist/js получим минифицированный файл JS