/4.2.lesson

Primary LanguageHTML

4.2.lesson

Примеры

В данном репозитории размещены примеры занятия 4.2 по трем темам:

  • использование Pug
    • ./pug_examples
  • использование Sass -
    • ./sass_examples
  • страничка на Vue
    • ./Vue

Для примеров Pug и Sass описаны способы:

  • формирования файлов html и css соответственно, с помощью утилит
  • настройки webpack для проектов с препроцессорами

Во вложенных директориях есть свой readme, который может оказаться полезным!

Шпаргалка

Настройка webpack

Инициализировать проект (создается package.json)

npm init

Установить webpack и webpack-cli в качестве зависимостей для разработки

npm install -D webpack webpack-cli

Создаем webpack.config.js в корне проекта, указываем точку входа и место сборки (указание и добавление загрузчиков есть в примерах Pug и Sass)

const path = require('path')

module.exports = {
    entry: {
        // ./src - путь к js файлу точки входа
        main: path.resolve(__dirname, './src/index.js'),
    },
    // точка выхода - куда скомпилированые файлы складываются
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}

В файле package.json - добавляем скрипт билд для компиляции проекта

"scripts": {
    "build": "webpack"
}

Домашнее задание

  1. Создайте свою ветку
  2. Создайте новую директорию pre_project
  3. Перенесите туда файлы из задания 4.1
  4. Задайте произвольный радиус скругления для каждой кнопки
    • используя при этом одну переменную (используйте Sass)
  5. Перепишите всю страницу html на pug
  6. Добавьте необходимые лоадеры для препроцессоров в webpack
  7. Соберите проект, так чтобы он работал
  8. Разместите свой код в своей ветке на удаленном репозитории