Вначале стоит вспомнить что это все такое и с чем его едят.
- Node.js (или просто Node) — это серверная платформа для работы с JavaScript через движок V8. JavaScript выполняет действие на стороне клиента, а Node — на сервере. С помощью Node можно писать полноценные приложения. Node умеет работать с внешними библиотеками, вызывать команды из кода на JavaScript и выполнять роль веб-сервера.
- NPM (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js.
- 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Если на вашем компьютере Node.js установлен, то Node.js command prompt (КС Node.js, а не КС операционной системы). Здесь вы можете легко проверить его версию набрав
Откройте конфигурацию переменных среды и добавьте эти 2 каталога в переменную Path.
C:\Program Files\nodejs\
C:\Users\your_user_name\AppData\Roaming\npm
И тогда каждый раз, когда вы открываете регулярное окно cmd, команды 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 и поэтому я устанавливаю локально её же:
У меня глобально стоит версия 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 project2cd ../project2npm up- волшебная команда. которая установит все пакеты и зависимости в новой папке!Командой
npm up мы просто подкачиваем все модули в наш новый проект
Не надо все устанавливать и настраивать заново (npm instal gulp или npm instal sass)
Мы просто подкачиваем те модули, которые прописаны в файле package.jsonПлюсы такого подхода:
- кроссплатформенность.
- всегда актуальная версия sass.
- gulp - все прелести префиксов, копирования и оптимизация картинок.
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.
Удачного кодирования!
