Что не так с алгоритмом в gulpfile js?

Question

[Дима Глазунов]

Недавно начал освоение Gulp 4 и никак не могу разобраться с компиляцией sass/scss в css. файл с css просто не создается. Нигде. Подскажите, в чём проблема?

gulp.task('sass', function(done) {
	return gulp.src('app/sass/**/*.sass')
	.pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
	.pipe(rename({suffix: '.min', prefix : ''}))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleanCSS()) // Опционально, закомментировать при отладке
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.reload({stream: true}));
	done()
});

Answer 1

[Рома Зварич]

Так как входящих данных очень мало, приходится угадывать и первое, что можно предположить, что в строке
return gulp.src('app/sass/**/*.sass')
Вы ищете файлы с расширением .sass, а код пишете, возможно на scss с таким же расширением .scss.
Так как исходных файлов с нужным расширением нет, то и не создаётся ничего.

Если нет, просьба уточнить, появляются ли в консоли какие-то ошибки. А еще лучше - выложить архив с проектом куда-то на https://fex.net/, чтобы можно было нормально изучить проект.

Comments

[Дима Глазунов]

[Рома Зварич]

Дима Глазунов, вот видите, в вопросе пишете, что

файл с css просто не создается

. А оказывается, что ошибка при обработке задач.

Учитывая данную ошибку, скорее всего, неправильно записан вызов этой задачи.
Просьба выложить полный код Gulp-файла, а не его фрагмент

[Дима Глазунов]

Рома Зварич,

var gulp           = require('gulp'),
		gutil          = require('gulp-util' ),
		sass           = require('gulp-sass'),
		browserSync    = require('browser-sync'),
		concat         = require('gulp-concat'),
		uglify         = require('gulp-uglify'),
		cleanCSS       = require('gulp-clean-css'),
		rename         = require('gulp-rename'),
		autoprefixer   = require('gulp-autoprefixer'),
		notify         = require("gulp-notify");

// Сервер и автообновление страницы Browsersync
gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: 'app'
		},
		notify: false,
		// tunnel: true,
		// tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
	});
});

// Минификация пользовательских скриптов проекта и JS библиотек в один файл
gulp.task('js', function() {
	return gulp.src([
		'app/libs/jquery/dist/jquery.min.js',
		'app/js/common.js', // Всегда в конце
		])
	.pipe(concat('scripts.min.js'))
	.pipe(uglify()) // Минимизировать весь js (на выбор)
	.pipe(gulp.dest('app/js/'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('sass', function() {
	return gulp.src('app/sass/**/*.sass')
	.pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
	.pipe(rename({suffix: '.min', prefix : ''}))
	.pipe(autoprefixer(['last 15 versions']))
	.pipe(cleanCSS()) // Опционально, закомментировать при отладке
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.reload({stream: true}));
});

gulp.task('watch', ['sass', 'js', 'browser-sync'], function() {
	gulp.watch('app/sass/**/*.sass', ['sass']);
	gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
	gulp.watch('app/*.html', browserSync.reload);
});

gulp.task('default', ['watch']);

[Рома Зварич]

Дима Глазунов,

Недавно начал освоение Gulp 4

А информацию берёте про Gulp 3.
Устаревшая она.
Много устаревших способов записи, из-за которых выдаёт ошибки.
Сижу отлавливаю и исправляю.
Закончу - выложу.
Но Вам стоит поискать другой источник обучения.

[Рома Зварич]

Дима Глазунов, напирмер, вот так.

Запускаете команду Gulp и наслаждаетесь разработкой.
Как я уже говорил до этого, в файле было много ошибок из-за устаревшего синтаксиса и неактуальных пакетов (например, gulp-util).
Ищите документацию по Gulp 4, а не Gulp 3.

P.S. Потратил много времени. Если ответ помог, можете пометить решением.

Пример кода

var gulp           = require('gulp'),
    // gutil          = require('gulp-util' ),
    sass           = require('gulp-sass'),
    browserSync    = require('browser-sync'),
    concat         = require('gulp-concat'),
    uglify         = require('gulp-uglify'),
    cleanCSS       = require('gulp-clean-css'),
    rename         = require('gulp-rename'),
    autoprefixer   = require('gulp-autoprefixer'),
    notify         = require("gulp-notify");

// Сервер и автообновление страницы Browsersync
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false,
    // tunnel: true,
    // tunnel: "projectmane", //Demonstration page: http://projectmane.localtunnel.me
  })

  gulp.watch('app/sass/*.sass', gulp.series('sass'));
  gulp.watch('app/libs/*.js', gulp.series('js'));
  gulp.watch('app/*.html').on('change', browserSync.reload);
});

// Минификация пользовательских скриптов проекта и JS библиотек в один файл
gulp.task('js', function() {
  return gulp.src('app/libs/common.js')
  .pipe(concat('scripts.min.js'))
  .pipe(uglify()) // Минимизировать весь js (на выбор)
  .pipe(gulp.dest('app/js/'))
  .pipe(browserSync.stream());
});

gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
  .pipe(sass({outputStyle: 'expand'}).on("error", notify.onError()))
  .pipe(rename({suffix: '.min', prefix : ''}))
  .pipe(autoprefixer(['last 15 versions']))
  .pipe(cleanCSS()) // Опционально, закомментировать при отладке
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.stream());
});

gulp.task('default', gulp.series('sass', 'js', 'browser-sync'));

[Дима Глазунов]

Рома Зварич, Всё заработало
Спасибо большое за помощь