Cssnano gulp: How to use ‘CSSNANO’ in Gulp

Содержание

gulp-cssnano — Анализ работоспособности пакетов npm

Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты.

Риск безопасности и лицензии для основных версий

Все версии

9.02.222 |

Версия				Уязвимости	Лицензионный риск
03/2018	Популярные	C H M L	H M L
2. 0.1	\|	01/2016		C H M L L L 5050 L L 5050 0022 В М Л
1. 1.0	\|	06/2015		C H M L	H M L
1. 0.0	\|	04/2015		C H M L	H M L

Лицензия

Массачусетский технологический институт

Политика безопасности

Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (44 164)

Скачать тренд

Звезды GitHub: 265
Вилки: 20
Авторы: 6

Частота фиксации

Нет последних коммитов

Открытые задачи: 14
Открытый PR: 5
Последняя версия: 5 лет назад
Последняя фиксация: 5 лет назад

Дальнейший анализ состояния обслуживания gulp-cssnano на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта для gulp-cssnano является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость Node.js: не определен

Возраст: 8 лет
Зависимости: 5 прямых
Версии: 9
Установочный размер: 5,97 КБ
Распределенные теги: 1
Количество файлов: 5
Обслуживающий персонал: 1
Типы TS: Нет

gulp-cssnano имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм.

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

Мне нравится мой одиннадцатый со стороной SCSS

Если вы похожи на меня, и вы не можете писать CSS без SASS, и вы хотите включить его для своего одиннадцатого сайта, это правильное место для вас.

Исходя из мира React Я сразу подумал о gulp , когда решил включить sass в свой проект, поэтому я ухватился за возможность использовать gulp tasks для компиляции SCSS и автоматического добавления префиксов поставщиков (я ненавижу их, и я google Какой CSS ставить префикс?почти каждый день).

Поскольку мы пишем gulp-задачи, я подумал, что минимизированный CSS также будет хорошей идеей.
Итак, если вам интересно, как я это сделал, давайте начнем 💪🏻

Что такое Gulp?

Gulp — это инструмент, который позволяет нам автоматизировать тривиальные задачи, которые обычно требуются для разработки веб-интерфейса, такие как запуск серверов, обработка SCSS и оптимизация ресурсов, таких как изображения или даже сценарии. Он также обеспечивает горячую перезагрузку при разработке.

Настройка

Первое, что я сделал, это добавил необходимые пакеты в каталог моего сайта:

Задачи Gulp

Чтобы использовать gulp, нам нужно настроить три задачи.

задача «CSS» для

скомпилируйте наши файлы SCSS в CSS
добавить префиксы поставщиков, когда это необходимо
уменьшите код

Задачи «просмотр» и «сборка» для запуска исходной задачи «css» при редактировании файлов (просмотр) или создании сайта (сборка).

Задача gulp — это просто функция, которой присваивается имя и которая может быть вызвана Gulp для редактирования наших файлов.

 const gulp = require('gulp') 
 const sass = require('gulp-sass') 
 const autoprefixer = require('gulp-autoprefixer') 
 const cssnano = require('gulp-cssnano')  gulp.task('css', function () { 
 return gulp 
 . src('./src/css /style.scss') //исходный файл для получения 
 .pipe(sass()) //отправляет исходный файл в плагин sass 
 .pipe(autoprefixer()) //отправляет исходный файл в плагин автопрефиксера 
 . pipe(cssnano()) //отправляет исходный файл плагину минификатора 
 .on('error', sass.logError) // регистрирует ошибки 
 .pipe(gulp.dest('./_site/css')) / /выводит результат в наш публичный каталог 
 }) 
  gulp.task('watch', function () { 
 gulp.watch('./src/css/*.scss', gulp.parallel('css')) 
 }) 
  gulp. task('build', gulp.parallel('css'))

Задачи watch и build вызывают gulp.parallel() , чтобы вложить в них предыдущую задачу.

Эти задачи можно вызывать из терминала через gulp watch или gulp build .

Автоматический запуск gulp

Разумеется, нам не нужно запускать эти команды каждый раз, когда мы редактируем файлы SCSS. Чтобы автоматизировать это, нам нужно добавить эти задачи в наши package. json файл:

 «скрипты»: { 
 «serve»: «gulp build & gulp watch & одиннадцати --serve», 
 «build»: «gulp build && yarn одиннадцати» 
 }

Теперь, всякий раз, когда мы запускаем один из этих двух скриптов пряжи, наши задачи gulp будут вызываться до того, как одиннадцать смогут проанализировать наш сайт.

Не уподобляйся мне…

…и читай документацию одиннадцатьдесят!

При настройке всего этого я целый час топтал, пытаясь понять, почему изменения в моих файлах SCSS не вызывают перезагрузку браузера.
Как оказалось, одиннадцать не отслеживает автоматически ни один файл в каталоге нашего проекта, но мы можем заставить его это делать, добавив эту строку в наш файл .eleventj.js :

 одиннадцатиКонфиг. /')

Обратите внимание, что одиннадцать не будут добавлять наблюдение за файлами или папками, которые находятся в .gitignore.
Чтобы изменить это поведение, нам нужно добавить еще одну строку в .