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





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

Источник