Современная верстка сайта. Часть 1. Настройка среды

Современная верстка сайта. Часть 1. Настройка среды

Современная верстка сайта. Часть 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

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

Источник