Не могу сделать автокомпиляцию sass?

Question

[udzumaki]

Привет тостерчане. Помогите с проблемой.

Надо чтобы sass компилировался в css. Вот мой код



Я знаю что можно юзать звёздочки но для наглядности я всё заменил на main.scss. Но это не важно. Ну и вот я захожу в цмд, пишу команду и вылазит ошибка.



Ничего не компилируется. Хелп.

Comments

[Модератор]

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег <code></code>
Размещение фрагментов кода в виде изображений запрещено.

Answer 1

[Валерий]

Попробуйте так:

// Include gulp
var gulp = require('gulp');

// Include Plugins
var sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps');

// Variables
var 
  source = 'source/',
  target = 'public/',
  styles = {
    'in': source + 'assets/scss/app.scss',
    'out': target + 'assets/css/'
  },

// SASS
gulp.task('sass', function() {
  return gulp.src(styles.in)
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(styles.out));
});

Здесь в задаче sass стили берутся из assets/scss/app.scss, расставляются вендор префиксы, удаляются все пробелы/переносы строк и результат размещается в assets/css/
При этом создается карта (sourcemaps). Штука очень полезная при разработке: в инспекторе элементов будет показываться тот scss файл, из которого правило подтягивается. Если что-то не надо - просто удалите ненужную строку.

Отслеживание изменений:

// Watch tasks
gulp.task('watch', function() {
  gulp.watch(styles.in, gulp.series('sass'));
});

У вас, обратите внимание, в командной строке ругань о том, что задача отслеживания генерируется либо сериями, либо запуском задач параллельно. Можете просто свой массив включить в gulp.series. Саму задачу можно указать в кавычках, если ничего добавлять не будете, то можно убрать квадратные скобки

Comments

[udzumaki]

Теперь оно просто не может найти модули



Я пробовал удалить какие-либо строки напоминающие об этих модулях но тогда начиналась бесконечная загрузка.

У меня самая последняя нода. Что я не так делаю?

[Валерий]

udzumaki,
Модули надо установить
для sass - npm install gulp-sass --save-dev
автопрефиксер - npm install gulp-autoprefixer --save-dev
клинCSS - npm install gulp-clean-css --save-dev
карта - npm install gulp-sourcemaps --save-dev

У вас сейчас ругань на то, что автопрефиксер не найден.

Самая простая сборка стилей:

// SASS
gulp.task('sass', function() {
  return gulp.src(styles.in)
    .pipe(sass())
    .pipe(gulp.dest(styles.out));
});

Обратите внимание на пути, которые у меня прописаны в переменной styles: у вас они другие. Замените на свои (с учетом слешей/косых).

[udzumaki]

Валерий, Я уже десятую минуту жду.



Спасибо за то что просветили меня в модулях. Не знаете из-за чего может быть такая загрузка?

[Валерий]

Все замечательно. Watch - это отслеживание изменений. При изменениях в scss файлах вы увидите выхлоп в командной строке. Всё изменения будут автоматом перенесены в итоговый css файл.

Завершение задачи Watch - нажать контрол-це.

Если Вам нужно просто получить css из scss - используйте задачу gulp sass. Но, если хотите отслеживать изменения в стилях при разработке с автоматическим заполнением итоговый стилей - тогда gulp watch

[udzumaki]

Валерий, спасибо, теперь всё работает

[Валерий]

Да не за что :)