Не компилирует sass в css используя gulp в sublime text, почему?

Question

[dima_maketov]

Добрый день.
Может быть кто-то сталкивался с такой проблемой(название темы) и может помочь в решении.
Gulp запускается, все бы все работает отлично, при сохранении изменений в html-файле - все отлично: страница перезагружается и выводит достоверную инфу, но когда сохраняешь sass, не происходит на сайте никаких изменений(потому как css код не обновляется). Английского не знаю, искал некоторые ответы в буржунете, но так ничего и не нашел, заранее благодарю.

gulpfile.js:

var gulp         = require('gulp'),
		sass         = require('gulp-sass'),
		autoprefixer = require('gulp-autoprefixer'),
		minifycss    = require('gulp-minify-css'),
		rename       = require('gulp-rename'),
		browserSync  = require('browser-sync').create(),
		concat       = require('gulp-concat'),
		uglify       = require('gulp-uglifyjs');

gulp.task('browser-sync', ['styles', 'scripts'], function() {
		browserSync.init({
				server: {
						baseDir: "./app"
				},
				notify: false
		});
});

gulp.task('styles', function () {
	return gulp.src('sass/*.sass')
	.pipe(sass({
		includePaths: require('node-bourbon').includePaths
	}).on('error', sass.logError))
	.pipe(rename({suffix: '.min', prefix : ''}))
	.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
	.pipe(minifycss())
	.pipe(gulp.dest('app/css'))
	.pipe(browserSync.stream());
});

gulp.task('scripts', function() {
	return gulp.src([
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/jquery-1.11.2.min.js',
		'./app/libs/waypoints/waypoints.min.js',
		'./app/libs/animate/animate-css.js',
		'./app/libs/plugins-scroll/plugins-scroll.js',
		])
		.pipe(concat('libs.js'))
		// .pipe(uglify()) //Minify libs.js
		.pipe(gulp.dest('./app/js/'));
});

gulp.task('watch', function () {
	gulp.watch('sass/*.sass', ['styles']);
	gulp.watch('app/libs/**/*.js', ['scripts']);
	gulp.watch('app/js/*.js').on("change", browserSync.reload);
	gulp.watch('app/*.html').on('change', browserSync.reload);
});

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

Использую: стартовый шаблон для верстки.

Comments

[sim3x]

gulpfile.js покажи

[dima_maketov]

sim3x: обновил описание вопроса. Код работает на видосах автора видиоуроков, собственно это его сборка. Поэтому не думаю, что тут что-то в gulpfile.

[sim3x]

dima_maketov:
а в консоль что пишется после сохранения сасс?

Answer 1

[Ihor Khrystiuk]

Сам намучился с этим шаблоном. Измени таск 'styles':
gulp.task('styles', function () {
return gulp.src('sass/*.sass')
// output non-minified CSS file
.pipe(sass({
includePaths: require('node-bourbon').includePaths
}).on('error', sass.logError))
.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
.pipe(gulp.dest('app/css'))
// output the minified version
.pipe(cleanCSS())
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream());
});

Answer 2

[natalu]

Та же проблема. Тот же видео курс смотрю. Как вы ее решили?