Современная верстка сайта. Часть 1. Настройка среды
Доброго времени суток! В данном циклей статье я покажу Вам как верстаются современные сайты. В примере будут приводится базовые основы, которые Вы затем, при необходимости, сможете адаптировать под конкретные требования.
Итак, в первую очередь вот файл package.json. Он содержит все необходимые для разработки зависимости. Обратите внимание, что Вы в любой момент можете добавить необходимые библиотеки самостоятельно.
{
"name": "build-site-frontend",
"version": "1.0.0",
"description": "Simple site fronted auto build tool",
"main": "",
"devDependencies": {
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-changed": "^4.0.3",
"gulp-nunjucks": "^5.0.1",
"gulp-pretty-html": "^2.0.10",
"gulp-remove-empty-lines": "^0.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"live-server": "^1.2.1",
"sass": "^1.49.0"
},
"scripts": {
"dev-server": "gulp devServer"
},
"keywords": [
"fronted",
"site"
],
"author": "Kiazim Khutaba",
"license": "ISC"
}
gulpfile.js
const { src, dest, watch, parallel } = require('gulp');
const rename = require('gulp-rename');
const nunjucks = require('gulp-nunjucks');
const prettifyHtml = require('gulp-pretty-html');
const del = require('del');
const liveServer = require('live-server');
const sass = require('gulp-sass')(require('sass'));
const removeEmptyLines = require('gulp-remove-empty-lines');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed');
/*
Конфигурация проекта - папки, который начинаются с ! не будут попадать в итоговую сборку
*/
const config = {
paths: {
templates: [
'./src/templates/**/*.njk',
'!./src/templates/base/**/*',
'!./src/templates/parts/**/*',
'!./src/templates/macro/**/*'
],
styles: [
'./src/styles/**/*.scss',
'./src/styles/**/*.css'
],
scripts: [
'./src/scripts/**/*.js'
],
images: [
'./src/images/**/*.{gif,jpg,png,svg}'
],
icons: [
'./src/icons/*'
],
watch: 'src/**/*'
}
}
// сборка шаблонов в страницы
const compileTemplates = () => {
const errorHandler = function (err) {
console.error(err.toString());
this.emit('end');
}
return src(config.paths.templates)
//.pipe(changed('dist', {extension: '.html'}))
.pipe(nunjucks.compile())
.on('error', errorHandler)
.pipe(rename({extname: '.html'}))
.pipe(prettifyHtml())
.pipe(removeEmptyLines())
.pipe(dest('dist'))
};
// сборка стилей
const styles = () => (
src(config.paths.styles)
//.pipe(changed('dist/styles', {extension: '.css'}))
.pipe(sass().on('error', sass.logError))
//.pipe(autoprefixer(['last 2 versions']))
.pipe(dest('./dist/styles'))
);
// сборка скриптов
const scripts = () => (
src(config.paths.scripts)
//.pipe(changed('dist/js'))
.pipe(dest('./dist/js'))
);
// простое копирование изображений
const copyImages = () => (
src(config.paths.images)
.pipe(changed('dist/images'))
.pipe(dest('dist/images'))
);
// копирование иконок
const copyIcons = () => (
src(config.paths.icons)
.pipe(changed('dist'))
.pipe(dest('dist'))
);
// очистка директории dist
const clean = () => del(['dist/*'])
// запуск задач параллельно - для ускорения сборки
const allTasksParallel = parallel(copyIcons, copyImages, compileTemplates, styles, scripts);
const devServer = () => {
liveServer.start({
host: '127.0.0.1',
port: 8080,
wait: 300,
root: 'dist'
});
allTasksParallel();
watch(config.paths.watch).on('all', (path, file) => {
//console.time('Build');
allTasksParallel();
//console.timeEnd('Build');
})
}
exports.default = allTasksParallel;
exports.copyImages = copyImages;
exports.devServer = devServer;
exports.build = compileTemplates;
exports.sass = styles;
exports.js = scripts;
Структура директорий проекта:
.
├── src
│ ├── icons
│ │ ├── android-chrome-192x192.png
│ │ ├── android-chrome-512x512.png
│ │ ├── apple-touch-icon.png
│ │ ├── browserconfig.xml
│ │ ├── favicon-16x16.png
│ │ ├── favicon-32x32.png
│ │ ├── favicon.ico
│ │ ├── mstile-150x150.png
│ │ ├── safari-pinned-tab.svg
│ │ └── site.webmanifest
│ ├── images
│ │ ├── partners
│ │ ├── about_building_1.jpg
│ │ ├── about_team_1.jpg
│ │ ├── bg_2.jpg
│ ├── scripts
│ │ └── main.js
│ ├── styles
│ │ ├── bootstrap.min.css
│ │ ├── bootstrap.min.css.map
│ │ ├── cleaning.scss
│ │ ├── _common.scss
│ │ ├── _init.scss
│ │ ├── main.scss
│ │ ├── _my_variables.scss
│ │ ├── _work_card.scss
│ │ └── works.scss
│ └── templates
│ ├── base
│ ├── macro
│ ├── parts
│ ├── 404.njk
│ ├── about.njk
│ ├── business.njk
│ ├── client_cases.njk
│ ├── contacts.njk
│ ├── index.njk
│ ├── index_old.njk
│ ├── interview.njk
│ ├── job.njk
│ ├── jobs.njk
│ ├── jobtypes.njk
│ ├── jobtypes_old.njk
│ ├── news.njk
│ ├── news_post.njk
│ ├── privacy-policy.njk
│ └── shiftwork.njk
├── gulpfile.js
├── LICENSE
├── package.json
├── package-lock.json
└── README.md
Запускается вот так:
$ npm run dev-server
Таким образом в данной статье мы рассмотрели настройку среды, которая необходима для последующей верстки сайт. Опять же повторюсь, она далека от совершенства и Вы вольны сами видоизменять ее под свои конкретный задачи.
-
Создано 03.03.2022 13:59:25
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.