Gulp не компилирует код scss в css
Я пытаюсь использовать gulp для преобразования scss в css. Я вношу изменения в scss, и в css ничего не меняется. У кого-нибудь есть идеи по этому поводу? Спасибо
Моя файловая структура такова:
index.html
app/scss/styles.scss
app/css/styles.css
файловая структура изображения
И мой файл gulp содержит это:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", ['sass']);
});
да, у меня есть styles.css в папке CSS
Ах, после редактирования - есть ли у вас средство отслеживания файлов, чтобы следить за изменениями в файлах .scss?
Я отредактировал свой пост, мне надоело использовать этот gulp.task ("watch", function () {gulp.watch ("scss / ** / *. Scss", ['scss']);});
У вас есть другие файлы .scss, кроме styles.scss, которые вы хотите скомпилировать? Я бы рекомендовал внести изменения в gulp.src в вашей задаче gulp с именем sass - измените его с app/scss/styles.scss на app/scss/**/*.scss. **/* - это способ указать ему проверять все подкаталоги на наличие файлов, которые заканчиваются на .scss "
Для задачи слежения, возможно, потребуется обновить путь с "scss/**/*.scss" на "app/scss/**/*.scss" - в начале может отсутствовать каталог app, поэтому он «наблюдает» за изменениями файлов не в том месте.
@miir .. Я заменил его на gulp.task "смотреть", function () {gulp.watch ("app / scss / ** / *. scss", ['scss']); }); но без изменений, я использую только один файл scss, чтобы проверить это
@kat Какие команды gulp вы запускаете в терминале? Да, другое дело, с gulp.watch("app/scss/**/*.scss", ['scss']); - второй параметр ['scss'] надо переименовать в ['sass']. Элементы в этом массиве (в квадратных скобках []) должны быть именами других задач gulp, которые должны выполняться при изменении отслеживаемых файлов. Другие ваши задачи для компиляции scss называются 'sass', так что это имя также можно использовать здесь.
@miir Я внес эти изменения сейчас, я запускаю "gulp sass" в терминале
@miir Я внес эти изменения сейчас, я запускаю "gulp sass" в терминале. Я обновил исходный код выше для этих изменений, но пока ничего не работает. Я новичок в этом.
Теперь у меня все работает, спасибо !!, хотя каждый раз, когда я хочу скомпилировать свой css, мне приходится каждый раз запускать "gulp sass", есть ли более быстрый способ скомпилировать scss, просто сохранив scss?
Вам нужно перейти на gulp.watch ("app / scss / ** / *. Scss", ['sass']); в задаче "смотреть". [Обратите внимание на добавленное приложение /]
@kat Да, вместо того, чтобы каждый раз запускать gulp sass, вы можете запускать gulp watch. Обратите внимание, что в gulpfile.js у вас есть gulp.task("sass", ... ); и gulp.task("watch"). Это задачи, которые вы там определили, поэтому обе они доступны для запуска из командной строки с помощью gulp sass или gulp watch соответственно. Задача наблюдения - это та задача, которую вы можете запустить один раз, и она будет продолжать работать для обнаружения изменений файлов, и каждый раз, когда что-то меняется, она автоматически запускает gulp sass для компиляции.
@miir .. Я внес эти изменения в исходный код выше, но задача gulp выполняется в терминале, но она не вносит изменений в scss и css, если я не использую gulp sass, есть идеи, почему это может быть? gulp.task ("часы", функция () {gulp.watch ("приложение / scss / ** / *. scss", ['sass']);});
@kat Я не уверен, мне это кажется правильным ... не могли бы вы объяснить, какие шаги вы делаете и каковы ваши ожидания от результата?
Ответы 1
Измените путь к файлам и dest на следующий
gulp.task("sass", function () {
return gulp
.src("./app/scss/styles.scss")
.pipe(sass())
.pipe(gulp.dest("./app/css"))
});
Есть ли в папке css файл styles.css?