<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.