tailwind template
v1.11.9
Прежде всего, обязательно запустите pnpm install в терминале в корневом каталоге этого проекта. Это установит все необходимые зависимости и генерирует вашу папку node_modules . Этот шаг очень важен.
В этом проекте используется CSS Tailwind CSS, утилита CSS-структуры. Требуемые зависимости уже должны быть включены в этот проект. Если вам не хватает папки Node_modules , просто запустите pnpm install , и она должна генерировать с зависимостью, указанными в файле Package.json .
Чтобы включить Tailwind CSS Intellisense, вам понадобится расширение кода VS. Я предлагаю установить пакет расширения CSS Tailwind CSS, который поставляется с несколькими расширениями, которые все работают вместе, чтобы сделать CSS с использованием Tailwind CSS гораздо лучшим опытом. Чтобы узнать больше об этом, нажмите на ссылку выше.
В корневой папке проекта есть папка активов/стилей . В нем расположена файл tailwind.css . Этот файл используется для в конечном итоге генерировать полностью скомпилированные стили CSS Tailwind. После составления он выводит классы в файл styles.css , также расположенный в папке Assets/Styles .
Чтобы работать в среде разработки, запустите сценарий dev NPM. Для этого используйте любой метод, описанный ниже.
pnpm run dev в корневой папке проекта.Это начнет длительный процесс наблюдения , который будет генерировать ваши стили по требованию вместо того, чтобы генерировать все заранее. Это чрезвычайно полезно для повышения и эффективности развития. В терминале вы должны увидеть первоначальное сообщение компиляции и количество времени, которое потребовалось. В любое время, когда вы сохраняете файл HTML, файл tailwind.css или файл tailwind.config.js , CSS будет обработан и повторно скомпилирован. Эти стили не будут министерны в процессе разработки.
Обратите внимание, что классы добавляются по требованию, но не удаляются по требованию. В настоящее время это по дизайну, как заявил Адам Ватан, создатель Tailwind CSS. Чтобы обойти это (кэш -разбивает это), просто сохраните файл tailwind.css . Это заставит полную повторную компиляцию и удалит любые неиспользованные классы.
Чтобы убить процесс наблюдения, поместите внимание на терминал, что процесс запускает его, и нажмите CTRL + C Вам следует попросить подтвердить ваше прекращение процесса. Подтвердите свой выбор, введя Y а затем ключ ENTER .
Мы будем использовать расширение кода VS для запуска нашего сервера. Поиск «Живой сервер» на вкладке VS Code Extensions. В качестве альтернативы, вы можете найти его на рынке Visual Studio.
После того, как вы загрузите и установите расширение, вы можете увидеть новую кнопку в нижнем правом углу окна в синей ленте. Он говорит , иди вживую . Когда вы нажимаете на это, он должен запустить сервер и открыть его в браузере.
Если вы не видите кнопку, просто щелкните правой кнопкой мыши файл index.html в Explorer файла кода VS и нажмите «Открыть с живым сервером» .
Строительство производства похоже на строительство для развития. Сделайте любое из следующего, чтобы построить CSS для производства.
pnpm run prod в корневой папке проекта.prod в сочетании сценариев NPM, расположенном в нижней части левой части вкладки File Explorer в VS -коде.Вопреки сценарию разработки, который мы использовали ранее, это не начнет длительный процесс наблюдения; Скорее, этот сценарий компилирует CSS один раз и только один раз. В файлах HTML будет проходить только классы, найденные в файлах HTML, и компилируют их в файл styles.css, расположенный в Assets/styles/styles.css . Эти стили будут министерством.
Этот проект использует Gulp для создания проекта для развертывания. Запустив Gulp, он создаст папку Dist в корне вашего проекта. Затем Gulp будет скопировать все необходимые файлы из источника и активы вашего проекта в папку Dist .
В дополнение к этому, Gulp также оптимизирует и министерствует файлы по мере необходимости. Файлы HTML, SVG и JavaScript будут министерны. Министерство файла просто означает удаление пробела и других ненужных символов/символов. Мы делаем это, чтобы уменьшить размер файлов.
Стили (CSS) будут скопированы и в DIST. Поскольку CSS уже заслужена использованием PostCSS и двигателя JIT Tailwind CLI, нам не нужно министерство его здесь. Важно сначала запустить pnpm run prod прежде чем запустить gulp . Не делая этого, Gulp будет использовать неофициальную версию вашего CSS.
Изображения также будут скопированы и оптимизированы с использованием оптимизатора изображения. Это только оптимизирует изображения PNG, JPG и GIF. Почти каждый другой тип изображения будет скопирован, но не оптимизирован, включая файлы PDF.
Итак, как вы используете Gulp? Это очень легко! Вот три варианта. 1) Откройте терминал кода VS и запустите командную gulp . Это выполнит задачу по умолчанию, найденную в файле Gulpfile.js в корневом каталоге. Затем задача по умолчанию выполняет все другие задачи для создания проекта. 2) В качестве альтернативы я создал сценарий NPM под названием gulp . Вы можете запустить это из нижнего левого угла окна кода VS на вкладке NPM Scripts. 3) Если вы не видите вкладку Scripts NPM, вы также можете запустить эту команду в терминале, запустив pnpm run gulp , но в этот момент просто ввод gulp проще.
В том случае, если вам нужно изменить имя выходной папки с DIST на что -то еще, просто перейдите в файл GulpFile.js и найдите destination переменной, расположенную рядом с верхней частью файла. По умолчанию он настроен на dist , но вы можете изменить это, заменив dist часть строки на все, что вы хотели бы. Другое общее название папки назначения - docs , который используется для развертывания проекта для страниц GitHub.
