NPM Настройка Gulp и компиляции SASS

Рано или поздно, любой разработчик приходит к тому, что удобнее использовать некие среды разработки, сборки, окружении, которое позволяет писать код быстро, и без дополнительных проблем собирать все файлы своих проектов в готовую (продакшн) версию.
Вначале стоит вспомнить что это все такое и с чем его едят.

1. Node.js (или просто Node) — это серверная платформа для работы с JavaScript через движок V8. JavaScript выполняет действие на стороне клиента, а Node — на сервере. С помощью Node можно писать полноценные приложения. Node умеет работать с внешними библиотеками, вызывать команды из кода на JavaScript и выполнять роль веб-сервера.
2. NPM (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js.
3. Gulp — это инструмент сборки веб-приложения, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки.

Сегодня мы установим Node.js, Gulp и настроим компиляцию для SASS.

Без долгих вступлений, приступим.

Если у вас не установлен Node.js, то его стоит установить с официального сайта в корневую папку вашего компьютера. Это облегчит вам в дальнейшем использование Node.js и позволит легко прописать для него пути для запуска в KC( здесь и далее КС - командная строка, но обратите ваше внимание на то, что сегодня мы работаем не в КС а Node.js command prompt). Сам процесс установки Node.js очень простой.Выбираете на сайте нужную версию и скачиваете. Соглашаетесь со всеми настройками -> Просто нажимаете "Далее" не убирая, и не ставя никакие галочки.

После установки Node.js появится в списке всех программ. Там можно найти её и через поиск. Открываем Node.js command prompt

Простая настройка NodeJS command prompt
Откройте конфигурацию переменных среды и добавьте эти 2 каталога в переменную Path.

C:\Program Files\nodejs\
C:\Users\your_user_name\AppData\Roaming\npm

И тогда каждый раз, когда вы открываете регулярное окно cmd, команды node.js будут доступны вам.

Если на вашем компьютере Node.js установлен, то Node.js command prompt (КС Node.js, а не КС операционной системы). Здесь вы можете легко проверить его версию набрав node-v

С помощью команды npm ls -g мы можем посмотреть список пакетов установленных глобально.

Установка Gulp

npm i gulp-cli -g Здесь npm- начало всех команд при работе с менеджером пакетов, i- установка (instal) и -g - глобальная установка. Это нужно, для того, чтобы мы могли из любой папки получить доступ к Gulp в дальнейшем. Нажимаем Enter. Ждем, пока от из сети подтянет и установит нужные пакеты.

Теперь мы можем вновь посмотреть их командой npm ls -g. Пакетов будет очень много.Дело в том. что все пакеты зависимы друг от друга и они загружаются в своих зависимостях. Если вы хотите посмотреть только то, что устанавливали сами ( на нулевом уровне вложенности), то npm ls -g --depth=0

Теперь если ввести команду gulp, то можно проверить наличие локальных версий. У нас он напишет, что их не найдено.

Создаем папку проекта на диске (например C://). В КС-node переходим в эту папку в корневую директорию cd путь к папке вашего пректа

Находясь в папке проекта устанавливаем Gupl локально - npm i gulp --save-dev

Внимание! Для корректной работы локально нужно устанавливать туже самую версию, что и глобально!
У меня глобально стоит версия 3.9.1 и поэтому я устанавливаю локально её же:
npm install gulp@3.9.1

В папке нашего проекта появится папка node_modules, куда и закачается наш локальный gulp

Теперь устанавливаем gulp-sass локально - npm i gulp-sass --save-dev Это плагин для gulp, который позволяет делать компиляцию файлов в обычный css.

Посмотреть что установлено npm ls --depth=0

Теперь просто пишем npm init и жмем Enter. Мы создаем package.json для того, чтобы в дальнейшем инициализировать наше приложение в других папках.

Формально, у нас почти все готово к работе. Остается создать gulpfile.js

Мы его создаем в корне нашего проекта и в этом файле нам нужно подключить наши пакеты:

var gulp = require('gulp');
var sass = require('gulp-sass');
 //и что-то выведем в консоль для подтверждения
gulp.task('default', function(){
 console.log("something");
});

Теперь команда gulp выведет в консоль something это говорит о том. что gulp работает!

Если задача не default, а например sass, то вызвать нужно так gulp sass через пробел!

Более подробно об установке и настройке я писал в постах: Gulp

Переходим к компиляции SASS файла

В корне проекта создать папку - project ->styles.scss

В папке gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./project/**/*.scss')
});

./project/**/*.scss' - ищем ВСЕ файлы с расширением .scss /**/- означает что поиск будет идти и по вложенным папкам В наш код добавляем :

gulp.task('sass', function(){
  gulp.src('./project/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./project'));
});

.pipe(gulp.dest('./project')) - куда все складывать.

Теперь запускаем gulp sass

В папке проекта появится файл style.css

В файле style.scss пишем, например:

$color: #fff;

body{
 background: $color;

       a{
 color: $color;
 }
}

Запускаем команду gulp sass и смотрим в style.css

body{
background: #fff;
}
  body a{
 color: #fff;
}

Это уже скомпилированный файл

Для того, чтобы каждый раз не вводить команду gulp sass мы в файле gulpfile.js добавляем

gulp.task('sass:watch', function(){
  gulp.watch('./project/**/*.scss', ['sass']);
});

Теперь мы запустим gulp sass:watch и он будет следить за всеми изменениями в директории ./project/**/*.scss' и расширением .scss

Теперь можно изменить наш файл style.scss

$color: #f0f;

body{
 background: $color;
 @debug lighten($color, 20%);
       a{
 color: lighten($color, 20$);
 }
}

И тут же изменится и css файл.

Для отслеживания ошибок в файл gulpfile.js добавляем строку - .pipe(sass().on('error', sass.logError)) и того:

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./project/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./project'));
});

gulp.task('sass:watch', function(){
  gulp.watch('./project/**/*.scss', ['sass']);
});

Теперь при ошибке не будет прерываться исполнение скрипта а будет выводиться сообщение об ошибке (Например что такая переменная не найдена)

Завершить задачу (закрыть работу над проектом) - Ctrl + C и сразуy

Теперь если нужен новый проект, то копируем файлы gulpfile.js и package.json Переносим в новый проект (Например project2);
cd project2
cd ../project2
npm up- волшебная команда. которая установит все пакеты и зависимости в новой папке!

Командой npm up мы просто подкачиваем все модули в наш новый проект Не надо все устанавливать и настраивать заново (npm instal gulp или npm instal sass) Мы просто подкачиваем те модули, которые прописаны в файле package.json

Плюсы такого подхода:

1. кроссплатформенность.
2. всегда актуальная версия sass.
3. gulp - все прелести префиксов, копирования и оптимизация картинок.

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.

Удачного кодирования!

---

                                                                                                                                                             

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE