NPM Настройка Gulp и компиляции SASS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul NPM Настройка Gulp и компиляции SASS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel gulp,
Artikel HTML и CSS Дополнение,
Artikel npm,
Artikel sass, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : NPM Настройка Gulp и компиляции SASS
link : NPM Настройка Gulp и компиляции SASS
Anda sekarang membaca artikel NPM Настройка Gulp и компиляции SASS dengan alamat link https://dev-create.blogspot.com/2018/04/npm-gulp-sass.html
Judul : NPM Настройка Gulp и компиляции SASS
link : NPM Настройка Gulp и компиляции SASS
NPM Настройка Gulp и компиляции SASS
Рано или поздно, любой разработчик приходит к тому, что удобнее использовать некие среды разработки, сборки, окружении, которое позволяет писать код быстро, и без дополнительных проблем собирать все файлы своих проектов в готовую (продакшн) версию.
Вначале стоит вспомнить что это все такое и с чем его едят.
Сегодня мы установим Node.js, Gulp и настроим компиляцию для SASS.
Без долгих вступлений, приступим.
Если у вас не установлен Node.js, то его стоит установить с официального сайта в корневую папку вашего компьютера. Это облегчит вам в дальнейшем использование Node.js и позволит легко прописать для него пути для запуска в KC( здесь и далее КС - командная строка, но обратите ваше внимание на то, что сегодня мы работаем не в КС а Node.js command prompt). Сам процесс установки Node.js очень простой.Выбираете на сайте нужную версию и скачиваете. Соглашаетесь со всеми настройками -> Просто нажимаете "Далее" не убирая, и не ставя никакие галочки.
После установки Node.js появится в списке всех программ. Там можно найти её и через поиск. Открываем
С помощью команды
Теперь мы можем вновь посмотреть их командой
Теперь если ввести команду
Создаем папку проекта на диске (например C://). В КС-node переходим в эту папку в корневую директорию
Находясь в папке проекта устанавливаем Gupl локально -
В папке нашего проекта появится папка node_modules, куда и закачается наш локальный gulp
Теперь устанавливаем gulp-sass локально -
Посмотреть что установлено
Теперь просто пишем
Формально, у нас почти все готово к работе. Остается создать gulpfile.js
Мы его создаем в корне нашего проекта и в этом файле нам нужно подключить наши пакеты:
Теперь команда
Если задача не default, а например sass, то вызвать нужно так
В папке gulpfile.js
Теперь запускаем
В папке проекта появится файл style.css
В файле style.scss пишем, например:
Запускаем команду
Это уже скомпилированный файл
Для того, чтобы каждый раз не вводить команду
Теперь мы запустим
Теперь можно изменить наш файл style.scss
И тут же изменится и css файл.
Для отслеживания ошибок в файл gulpfile.js добавляем строку - .pipe(sass().on('error', sass.logError))и того:
gulpfile.js
Теперь при ошибке не будет прерываться исполнение скрипта а будет выводиться сообщение об ошибке (Например что такая переменная не найдена)
Завершить задачу (закрыть работу над проектом) -
Теперь если нужен новый проект, то копируем файлы gulpfile.js и package.json Переносим в новый проект (Например project2);
Командой
Плюсы такого подхода:
Удачного кодирования!
Вначале стоит вспомнить что это все такое и с чем его едят.
- 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 project2
cd ../project2
npm up
- волшебная команда. которая установит все пакеты и зависимости в новой папке!Командой
npm up
мы просто подкачиваем все модули в наш новый проект Не надо все устанавливать и настраивать заново (npm instal gulp или npm instal sass) Мы просто подкачиваем те модули, которые прописаны в файле package.jsonПлюсы такого подхода:
- кроссплатформенность.
- всегда актуальная версия sass.
- gulp - все прелести префиксов, копирования и оптимизация картинок.
Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.
Удачного кодирования!
Demikianlah Artikel NPM Настройка Gulp и компиляции SASS
Sekianlah artikel NPM Настройка Gulp и компиляции SASS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel NPM Настройка Gulp и компиляции SASS dengan alamat link https://dev-create.blogspot.com/2018/04/npm-gulp-sass.html