Apr 19 2019 at 16:05

Parcel + Pug + Scss. Быстрая альтернатива Webpack

CSS*HTML*JavaScript*Website development*

Invite pending

В этом посте я расскажу вам, как использовать Parcel, Pug и Sсss

Проблема с Webpack заключается в его настройке. Это довольно утомительное занятие для опытного разработчика, а для новичка оно может стать настоящим кошмаром. Parcel предлагает простой и быстрый способ конфигурации проекта.

Parcel имеет встроенную поддержку большого количества функций: CSS, SCSS, Pug, Babel, PostCSS, PostHTML, TypeScript, JSX для React и Preact, Минификацию и Сервер разработки.
На данный момент Parcel не поддерживает сборку с распределением ресурсов по папкам, но эту функцию нам обещают в будующей версии.

Итак приступим

Создайте папку для проекта, в ней папку src и внутри неё несколько файлов:

корневая папка проекта
- / src
--- index.pug
--- main.js
--- main.scss

Для установки Parcel с помощью npm наберите в консоли:

npm install -g parcel-bundler

Создайте файл package.json в папке вашего проекта:

npm init -y

В index.pug вставьте:

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
    body
        h1 Hello Parcel!
        script(src='./main.js')

В main.js пишем:

import './main.scss';
console.log('Hello main.js!')

В main.scss вставляем:

$color_h1: tomato;

h1 {
    color: $color_h1;
}

Добавьте скрипты в package.json для запуска сервера и сборки проекта:

"start": "parcel src/index.pug --open",
"build": "parcel build src/index.pug -d docs --public-url ./"

Теперь он должен выглядеть примерно так:

{
  "name": "parcel-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel src/index.pug --open",
    "build": "parcel build src/index.pug -d docs --public-url ./"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Для запуска локального сервера наберите: npm run start.

Благодаря ключу --open окно браузера будет открываться автоматически.

На странице вы увидете приветствие Hello Parcel! Текст будет окрашен в «помидорный» цвет (это работают стиль из main.scss), если откроете консоль браузера, вы увидите сообщение Hello main.js! (это подключился main.js).

Для отключения сервера нажмите Ctrl +

Для сборки проекта вводим комманду: npm run build.

Ключ -d docs соберёт проект в папку docs (пригодится для Github Pages).

Ключ --public-url ./ нужен для генерации корректных ссылок для ресурсов проекта.

Готово!

Hubs: