В этой статье я расскажу вам, как создать простую структуру CSS с помощью SASS и Gulp.
Создать новый проект
Обязательным условием является наличие в вашей системе запущенных узлов и npm. Инициализируйте новый модуль npm, установите gulp и gulp-sass в качестве зависимостей для разработчиков.
Настроить глоток
Создайте файл с именем `gulpfile.js` в корневом каталоге и вставьте следующие строки:
В gulp каждая команда является задачей. Задача может не содержать или содержать несколько потоков (например, канал). Gulp — это не что иное, как программа node, поэтому мы можем использовать любой пакет npm (здесь мы используем node-sass).
Здесь мы создали две задачи стили и по умолчанию. stylesзадачавозьмет файлы .scss из каталога scss, расположенного внутри корня, скомпилирует файлы SCSS в файлы CSS и поместит их в каталог css. Задача по умолчанию будет отслеживать изменения в каталоге scss и повторно запускать задачу styles при изменении файла.
Вы можете создать другую задачу сборки, которая может использовать пакет uglify npm для минимизации css и использования его в производстве.
Теперь беги,
gulp styles
который создаст файлы SCSS в файлы CSS. тогда
gulp
который будет следить за изменениями и повторно запускать стили при изменении файла.
Весь проект можно найти в репозитории git sass-gulp-kit. Делитесь своими комментариями и отзывами.
