Установка NPM и Gulp. Компиляция SASS
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- В данном видео мы рассмотрим как установить npm и gulp, а также настроим удобную компиляцию sass в css с помощью gulp watch.
В видео:
- установка node.js
- команда npm list
- установка gulp-cli
- установка gulp и sass в режиме --save-dev
- команда npm init
- настройка gulp для компиляции sass
- настройка автоматической компиляции sass при сохранении файла
- перенос настроек из проекта в проект - команда npm up
На каждом блять этапе какая-нибудь проблема выскочит
У чувака талант, доступно объяснять сложные вещи. Вот к такому человку я б записался на курс. Ну просто уважение и благодарность за такое изложение материала. Спасибо, Дмитрий.
Ребята может быть кому то полезен если у вас Gulp версия >4 то перед функции должны вставить async чтобы не видала ошибку а для watch вместо ['sass'] добавим это gulp.parallel('sass').
Спасибо большое за подсказку, помогло)
Да ты красавчик!)
Мля, тоже долго искал решение, и нашел "async для функции", только вместо "gulp.parallel", прописал "gulp.series(sass)".
Спасибо)
var gulp = require ("gulp");
var sass = require ("gulp-sass");
gulp.task("sass", function(){
gulp.src("./Папка/**/*.тут вводим на чем будем писать код на sass или scss")
.pipe(sass())
.pipe(gulp.dest("./start"));
});
gulp.task("sass:watch", function(){
gulp.watch("./start/**/*.тут вводим на чем будем писать код на sass или scss", ["sass"]);
});
подскажите пожалуйста что делать?
Вот такая ошибка
gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличи
е и правильность пути, после чего повторите попытку.
строка:1 знак:1
+ gulp styles
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Ой спасибо, дядь) Немножко обнадёжил - всё не так сложно)
C:\FRONT-END\Node js\test_1>npm i gulp-sass --save-dev
npm WARN saveError ENOENT: no such file or directory, open 'C:\FRONT-END\Node js\test_1\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\FRONT-END\Node js\test_1\package.json'
npm WARN test_1 No description
npm WARN test_1 No repository field.
npm WARN test_1 No README data
npm WARN test_1 No license field.
+ gulp-sass@3.1.0
updated 1 package in 6.25s
После прописывания npm ls --depth=0 пишет кучу ошибок
C:\FRONT-END\Node js\test_1
+-- gulp@3.9.1
`-- gulp-sass@3.1.0
npm ERR! extraneous: kind-of@3.2.2 C:\FRONT-END\Node js\test_1
ode_modules\is-number
ode_modules\kind-of
npm ERR! extraneous: kind-of@3.2.2 C:\FRONT-END\Node js\test_1
ode_modules\snapdragon-util
ode_modules\kind-of
npm ERR! extraneous: extend-shallow@3.0.2 C:\FRONT-END\Node js\test_1
ode_modules\split-string
ode_modules\extend-shallow и т.д.
С чем это может быть связанно и как это исправить?
Дмитрий Пропольский как решили задачу? У меня тоже так пишет(
Дмитрий, привет. Спасибо за видео. долго немой понять почему не работала компиляция. Все норм кроме того, что потом понял в gulp4 нужно прописывать - "gulp.watch ('./project/**/*.scss', gulp.series('sass'));"
Спасибо тебе , братан
gulp.task('watch', function(){
gulp.watch('./prject/**/*.scss', gulp.series('sass'));
});
У меня вот так сработало. Всё зависит от версии gulp
Чем может быть вызванна такая ошибка при попытки вызвать таск
internal/modules/cjs/loader.js:589
throw err;
^
Error: Cannot find module 'gulp-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
at Function.Module._load (internal/modules/cjs/loader.js:513:25)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (D:\test1\gulpfile.js:2:12)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
не пойму... что то идет не так..
На притив кадждого пакета написано
| | +-- path-exists@2.1.0
| | | `-- pinkie-promise@2.0.1 deduped
| | `-- pinkie-promise@2.0.1
| | +-- pify@2.3.0
| | +-- pinkie-promise@2.0.1 deduped
Что такое deduped?????
Но при установке вообще какой то роуминг происходит, у кого было??
Как бороться??
такую строку выдает:
C:\Users\1\AppData\Roaming
pm\gulp -> C:\Users\1\AppData\Roaming
pm
ode_modules\gulp-cli\bin\gulp.js
Прям такая строка (со стрелкой) он сам что то там перебрасывает - почему не понятно... А потом на против пакетов deduped deduped deduped
Раньше Gulp устанавливал без проблем, тут на новый комп решил поставить.. Не выходит((
Gulp не является внутренней или внешней командой, исполняемой программой или пакетом файлов.
Такая ошибка
Спасибо, добрый человек)) Это на 100% именно то, что было нужно)))
Когда пишу npm ls --depth=0, выходит ошибка. Много строчек с npm ERR! Extraneouse: ... И т. д..
Почему так ?
Дякую. Доступно викладено матеріал.)
почему после установки галпа локально после команды npm ls --dpth=0 вот такая ошибка? - take.ms/ynAKP
Жаслан Есмагабетов у меня такая же ошибка. Как решили?..
а если в vscode есть пакет с компилятором sass (Live Sass Compiler) - то нужен ли galp?
У меня ошибка? Как решить? Не находит gulp
Спасибо БОЛЬШУЩЕЕ за видео. Не так все страшно стало. )
Error: watching ./project/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
at Gulp.watch (A:\Sergey\Frontend
ode
ode_modules\gulp\index.js:31:11)
at A:\Sergey\Frontend
ode\gulpfile.js:11:7
at taskWrapper (A:\Sergey\Frontend
ode
ode_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:402:14)
at runBound (domain.js:415:12)
at asyncRunner (A:\Sergey\Frontend
ode
ode_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Мой gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function(){
gulp.src('./project/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./project'));
});
gulp.task('sass:watch', function(){
gulp.watch('./project/**/*.scss', ['sass']);
});
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
./project/**/*.scss: - иерархию я сохранил как на видео (и если бы даже не сохранил, то default также не запускалось).
Проблема в команде в sass:watch, без неё команда default нормально работает и генерирует файл, а когда я добавил отслеживание выбило оошибку. Кто может чем помогите, и да возможна иза давности видео уже как 3 года вышло.
Проблему решил? Расскажи как
Спасибо!!!Подскажите что за предупреждения выдаёт консоль?npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update t
а если мой проект находится на рабочем столе. как прописать к папке проекта путь?
и вот ещё > node-sass@4.5.0 postinstall C:\Users\Evgenii\Desktop\myproject
ode_modules
ode-sass
> node scripts/build.js
У кого ошибка появляется, то файл 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.watch('./project/**/*.scss', gulp.series('sass'));
})
gulp.task('sass:watch', function(){
gulp.watch('./project/**/*.scss', gulp.series('sass'));
})
Спасибо, помог
Лайк тебе за концовку к видео!!! Единственный кто сказал важную вещь о переносе файлов в новый проект!
который не работает
Для тех, у кого добавление строки .pipe(sass().on('error', sass.logError)) не решает вопрос прерывания отслеживания:
В оф доках есть описание синхронной компиляции www.npmjs.com/package/gulp-sass. Строка преобразуется в .pipe(sass.sync().on('error', sass.logError))
не подскажите где что поменять, что то не пойму почему не работает
сделал репозиторий, чтобы каждый раз не копипастить код/файлы
github.com/aziev/simplate
Лаврик бомба честна говоря
Отлично, мне помогло
боже какая муть...
мне не понравился sass так как он требовательный
а что насчёт less? или вообще не нравятся препроцессоры?
Извиняюсь . Предидущий комент написал не досмотрев до конца. Оказывается можно sccs тоже компилировать. Автор спасибо что внес ясность.
2020 не работает (
У меня при установке gulp ошибка: Cannot read property 'resolve' not defined. Помогите, пожалуйста
sass это ужас летящий на крыльях ночи. Минусы:
1) Приходится соблюдать отступы.
2) CSS я пишу две буквы, нажимаю таб и у меня код сам дописывает редактор. Здесь все приходится писать руками от и до.
Ищу материал по sccs
у меня при скачивании всё возвращается обратно с надписью rolling back action :с. Исправить никак не получается, даже был на китайских форумах, теперь я их точно посещать не буду
у меня что то не находит json
enoent no such file or directory package.json
что то не установил?
У кого MacOS.
Если gulp ставится с ошибкой, вначале команд в которых есть атрибут -g (глобал) нужно указывать sudo.
Пример результата с ошибкой: npm i gulp-cli -g
Решение: sudo npm i gulp-cli -g
sudo - выполнение команды с правами администратора.
Если кому помог, буду рад)
У меня npm ругался на имя папки. Новая папка, следовательно нужно name исправить в package.json, имя папки прописал и все гуд.
Рекомендуется использовать yarn. Он безопаснее, да ивообще можете почитать отличия от npm. Но там все также, пакеты в смысле, те же.
у меня при команде gulp пишет command not found. Как мне помочь ей найтись? создание файла gulpfile.js абсолютно ничего не меняет при этом
Мне помогла эта команда: npm install -g gulp-sass
Вводил ее в папке с проектом и все Error пропали
Надеюсь кому-нибудь это поможет)
И еще мне sass не нравиться тем что файлы распаковываются скажем в core.CSS :-( интересно gulp следит за CSS?
Коала никак не хотела работать на моем компе, стал искать обходные пути. Нашел это видео. Автор очень подробно и понятно объясняет. У меня всё получилось. Ура!!! Большое спасибо!
Спасибо. Перерыл много видео по настройке SASS или LESS. Сразу через командную строку понравилось больше чем все остальное с применением стороннего ПО. И это единственное видео помогло в настройке! Два дня убил на изучение и настройку. Спасибо, огромное!
Дякую))))))))))0
Спасибо
Блин, Спасибо, реально помогло разрулить ситуацию. Лайк и подписка. Наверное у тебя все видосы такие грамотные, надо посмотреть.
Когда прописываю gulp sass то выдает ошибку SyntaxError: Unexpected token
посмотрел и понял, что хватит и коалы
посмотрел и понял, что хватит и кока колы
Лучшее видео по этой теме - которое я посмотрел. Сразу всё получилось.
gulp устанавливается один раз или отдельно под каждый проект?
у меню локально много пакетов есть, как все удалить?
Спасибо, ты меня переубедил использовать gulp ))
можно было бы поставить 2,3 и более лайков поставил бы
сначала казалось, что это все нереально сложно, но все таки поставил на мак. Спасибо
А как сделать так что бы ts компилировался в js ?
Дмитрий один из лучших преподавателей !
Спасибо за урок.
привет ! чёт не понятно про pkg, не появляется папка
Привет Дмитрий! А не подскажешь что я не так делаю? У меня после команды gulp просто открывается редактор в котором я пишу gulp.js...т.е. как будто я просто нажимаю на gulp.js в виндовсе. Получается что команда не выполняется в консоле, а через js консоль как то вызывается gulp.js...Не пойму в чем дело..не сложно подсказать?
Разобрался сам. Вот ведь замороченно как! Оказывается я создал gulp.js а не gulpfile.js
Спасибо за урок!
Повторяю все действия за вами, на 5,19 минуте видео у меня не получается как у вас:
radikalno.ru/full/2018/6/17/e6eeb676db9f604397c95b11536bb108-full.jpg.html
у него так же пишет, ничего страшного
спасибо, всё подключил, всё работает
Ты очень крутой! Спасибо, очень доходчиво)
npm не является внутренней или внешней командой =( запарился уже. нихрена понять не могу.
node -v Должно вывести версию установленного node.js. Если у вас Windows, то npm идёт с ним в комплекте. Если нет, устанавливайте отдельно
Урок уже малек не актуален. Нужно учитывать некоторые нюансы.
Спасибо, все отлично. Работает как для scss так и для sass синтаксиса
Privet Pochemu ne govorite chto dlya kompilirovaniya sass v css v terminale nughna komanda ''
gulp sass''
может быть потому, что таск по компиляции сцсс в цсс зашит в default таск? И достаточно написать команду gulp, которая в свою очередь всегда выполняет таск с именем default?
спасибо, все коротко и ясно. к тому же и наглядно )
Спасибо, ясно! Но надо еще посмотреть, чтоб лучше запомнить
спасибо бро) помог после переустановки винды!
Лаврик лучший как и коты твои))
А у меня на команду npm ls -g он вывалил что там стока всего установлено, что черт сломит. Мне тогда не надо глобально ничего будет устанавливать ?
Или если я по новой установлю ни чего страшного не произойдет. Просто перепишется пакет заново? Или лучше все удалить и ставить заново. Подскажите пжлст
Спс Дмитрий давно смотрю твои видосы)
Очень доступно и кратко. Спасибо
А как пользоваться Галпом во время самой разработки? Галпом, с сасс понятно, как допустим выйти на локалхост, как запустить и отслеживать изменения во время верстки, по типа плагина ливрелоад? Буду еще уроки по галпу?
Нужно подключить browser-sync плагин для gulp и настроить в gulpfile.js
для каждого нового проекта нужно устанавливать все эти пакеты по новой?
досмотри видео до конца
Спасибо! Очень понравилось)
Отличное объяснение. Спасибо!
спасибо, здорово выручил)
styles.css не создался. печалька
У меня тоже с начала не создался. В консоли вместо "gulp sass", напишите "gulp --sass". После того как я это написал у меня все сработало
Спасибо огромное!
Отличный мануал!
Команда npm i --save-dev gulp gulp-sass не срабатывала, вылезала ошибка. Нужно было npm init запустить перед ней.
Вот так npm i --save-dev gulp-sass
ну так само собой, сама надпись --save-dev говорит о том, чтобы внести изменения в package.json. А команда npm init как раз и позволяет создать этот самый файл.
Очень помог, спасибо огромное)
Зачем остальные не объясняют так просто? : )
не "зачем", а "почему"! :)
Подскажите какую кодировку выбирать для scss файла. У меня в сублайме дефолтная стоит plain text. Необходимо поменять на css?
Это не кодировка, а подсветка кода, которая помогает Вам писать код.
Да, точно, её я и имел ввиду. Просто обычная подсветка css не особо помогает ускорить верстку в scss. Пробовал загрузить sass подсветку,но с ней почему-то не работает эммет
красавчик!
npn" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.
во чего мне ипишет.
привет.
npm -v
проверь есть ли у тебя он.
если нет, установи нод.
Круто!
Дима спасибо)
Спасибо тебе огромное! Все осень доступно и понятно! Лайк и подписка!
очень*
Доступно
Шикарный обзор, спасибо
Огромное спасибо!
круто! спасибо
Спасибо!
не создается файл styles.css, не понимаю что не так
То же самое. Второй день пошёл. Все пути испробованы.
проверь расширение файла через ПКМ - Свойства. Если там .txt то в этом и проблема
у какого файла? проверил все, ни у одного нет "txt", styles.css не создается((
Дмитрий Васильев запишы может видео, залей на ютуб. Попробуем разобраться
пользуюсь VS Code, установлено в нем расширение Live Sass Compiler... после того, как запустил его, ткнув Watch Sass в строке состояния - сразу всё сработало и появился нужный файлик в нужной папке О_о Видимо у меня других приблуд еще куча установлена и что-то с чем-то не поделило пространство жизнедеятельности :)
прописал gulp.task('default", function(){ console.log(10);
}); запускаю в консоли gulp и пишет gulp.task is not a function. Ставил все как в уроке, только nodejs версии 6.10 Не пойму в чем проблема.
кавычки у названия таска
спасибо, Навальный!
А реально запускать консоль node js из папки как-то? А не писать каждый раз путь? Это же утомительно! И сводит на нет всё преимущество в скорости работы пакетов..
из консоли/терминала запускаете?
Да. просто как-то не очевидно что надо сначала скопировать путь, потому запустить консоль (windows), мышкой! вставить путь, и только потом перейти..может есть встроенный функционал и трюк чтобы сразу с правой кнопки, например, или с иконки запустить консольку из папки.
Пользуясь случаем - спасибо за ваши видео!
в поиске пишешь node и там покажет консоль, выбрал и все
В нужной тебе папке жмешь shift+mouse2 ----> открыть окно команд
Дмитрий Лещенко спасибо!
Для тебя в раю есть отдельный котел с девственницами