Примечания к Курсу Удеми Йонаса Шмедтмана
Использование npm для Sass
Мы устанавливаем node.js, если еще этого не сделали. Чтобы начать использовать npm, мы должны перейти в папку нашего проекта с помощью нашей командной строки / терминала и выполнить npm init
. Утилита проведет нас через создание файла package.json, который в итоге будет выглядеть примерно так:
Затем мы устанавливаем компилятор Sass с помощью этой команды: npm install node-sass --save-dev
. Часть --save-dev
гарантирует, что в нашем файле package.json этот пакет указан как одна из зависимостей нашего разработчика. Позже, если другой разработчик клонирует наш репозиторий, он просто запустит npm install
, и файл package.json проинструктирует npm установить node-sass вместе с другими модулями node.
После создания каталога Sass с файлом main.scss
нам нужно скомпилировать наш файл Sass. Сначала мы заходим в наш package.json и внутри объекта "scripts"
добавляем эту пару ключ-значение: "compile:sass": "node-sass sass/main.scss css/style.css"
. Затем в нашем терминале выполняем npm run compile:sass
. Эта команда компилирует наш входной файл Sass в выходной файл CSS. Если мы не хотим вручную компилировать каждый раз, когда мы вносим изменения в наш файл Sass и перезагружаем нашу веб-страницу, мы можем добавить флаг наблюдения к нашему сценарию пакета: "compile:sass": "node-sass sass/main.scss css/style.css -w"
. Теперь, каждый раз, когда мы сохраняем наш файл Sass, npm-sass будет компилировать его для нас.
Настройка процесса сборки
Нам нужно настроить процесс сборки, который сначала скомпилирует наш Sass, затем объединит этот вывод с внешней библиотекой CSS, которую мы использовали, затем автоматически добавит префиксы для поддержки браузера, а затем сожмет весь наш файл CSS в одну строку для минимального размера файла. . Нам не обязательно выполнять все эти шаги при разработке нашего проекта, но мы определенно хотим, чтобы они были выполнены при его развертывании.
Компиляция
При разработке мы использовали этот файл package.json:
На самом деле мы хотим настроить два процесса компиляции: один, который автоматически перекомпилирует наш Sass, когда мы его редактируем, а другой, который компилирует наш Sass на этапе сборки нашего проекта. Мы создадим новый скрипт под названием watch:sass
и вместо него добавим к нему флаг наблюдения:
Конкатенация
В проекте Natours у нас есть внешняя библиотека CSS: iconfont.css. После того, как наш compile:sass
скрипт создаст файл style.comp.css, мы хотим объединить его с iconfont.css. Для этого запускаем npm install concat --save-dev
. Затем в нашем package.json мы создаем сценарий, который указывает желаемый выходной файл (рядом с тегом -o
), а затем перечисляет файлы, которые мы хотим объединить. После этого шага наш package.json будет выглядеть так:
Префикс
Мы можем установить автоматический префиксатор, запустив npm install autoprefixer --save-dev
. Поскольку этот автоматический префиксатор является частью пакета PostCSS, нам также необходимо установить его: npm install postcss-cli --save-dev
. Скрипт для префикса немного сложнее, чем другие. Сначала мы вызываем пакет postcss
для --use
autoprefixer
. Затем мы устанавливаем целевой браузер -b
на 'last 10 version’
, который добавит префиксы для совместимости с последними 10 версиями всех основных браузеров. Затем мы указываем наш входной файл, выходной тег, а затем выходной файл. После этого шага это наш package.json:
Сжатие
Поскольку в Node Sass уже есть функция сжатия, нам просто нужно добавить новый скрипт в наш файл JSON, который содержит наш входной файл, выходной файл и стиль вывода: "compress:css": node-sass css/style.prefix.css css/style.css --output-style compressed"
.
Процесс сборки
Чтобы объединить процессы, мы сначала запускаем npm install npm-run-all --save-dev
. Затем мы можем написать сценарий, содержащий npm-run-all
, за которым следует список всех сценариев, которые мы хотим запустить, через пробел.
Мы также можем использовать этот новый пакет для объединения скрипта, который следит за нашим CSS, с нашим живым сервером. Для этого мы создаем сценарий типа "devserver": "live-server"
, поскольку мы не можем вызвать live-server
напрямую. Затем, следуя соглашению, мы создаем сценарий с именем start
, который объединяет два сценария. Поскольку мы хотим, чтобы эти два процесса выполнялись одновременно, а не последовательно, мы добавляем флаг --parellel
.
Последнее воплощение нашего package.json выглядит так: