Примечания к Курсу Удеми Йонаса Шмедтмана

Использование 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 выглядит так: