Как я создаю прототип веб-страницы

Краткий обзор простого рабочего процесса, который я использую для создания прототипа веб-страницы

Иногда я работаю над отдельными веб-страницами для своих проектов.

Может быть, я хочу переделать блог. Может быть, это целевая страница для нового проекта.

Это тот процесс, который я использую.

Я люблю использоватьПопутный ветерпостроить прототипы.

Я настроил весь конвейер для Tailwind иPostCSSпервый:

Создаватьpostcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
cssnano({ preset: ‘default’ }),
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}

Создаватьtailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Craete atailwind.cssфайл:

@tailwind base;
@tailwind components;
@tailwind utilities;

Создатьpackage.jsonфайл:

{
  "main": "index.js",
  "scripts": {
    "build:css": "postcss tailwind.css -o output.css",
    "watch": "watch 'npm run build:css' ./layouts"
  },
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "autoprefixer": "^9.7.1",
    "cssnano": "^4.1.10",
    "postcss": "^7.0.21",
    "tailwindcss": "^1.1.3",
    "watch": "^1.0.2"
  }
}

Создатьlayouts/index.htmlстраницу и добавьте свой HTML.

Запустите оболочку терминала, перейдите в папку проекта и запустите:

npm run watch

Затем я заставляю браузер автоматически синхронизировать изменения каждый раз, когда я сохраняю страницу или восстанавливаю CSS, используяbrowser-sync, отличную утилиту, которую можно установить с помощьюnpm install -g browser-sync:

browser-sync start --server --files "."

Это запускает сервер, а также автоматически открывает браузер и указывает на только что созданный локальный веб-сервер.

Теперь я открываю VS Code и браузер бок о бок и приступаю к созданию прототипа!


Дополнительные лабораторные уроки:


Tech Wiki Online!