Gulp не следит за обновлениями sass файлов, в чем проблема?

Question

[lavezzi1]

Здравствуйте. Использую jekyll для геренрации статического сайта. Установил также gulp https://github.com/shakyShane/jekyll-gulp-sass-bro... по этой статьи. Но у меня немного другая структура. В итоге при редактировании html браузер перезагружается страницу и изменения видны, а вот с scss все грустно, вообще не реагирует, ошибок тоже нет. Посмотри пожалуйста:
Структура:


Текущий gulpfile.js

// plugins for development
var gulp = require('gulp'),
	sass = require('gulp-sass'),
	prefix = require('gulp-autoprefixer'),
	plumber = require('gulp-plumber'),
	dirSync = require('gulp-directory-sync'),
	browserSync = require('browser-sync').create(),
	concat = require('gulp-concat'),
  cp = require('child_process');

// plugins for build
var purify = require('gulp-purifycss'),
	uglify = require('gulp-uglify'),
	csso = require('gulp-csso'),
	combineMq = require('gulp-combine-mq');

//var assetsDir = 'source/';
var outputDir = '_site/';
//var buildDir = 'build/';

//----------------------------------------------------Compiling
var messages = {
    jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};


// Build the Jekyll Site

gulp.task('jekyll-build', function (done) {
    browserSync.notify(messages.jekyllBuild);
    return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
        .on('close', done);
});


// Rebuild Jekyll & do page reload

gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
    browserSync.reload();
});

gulp.task('sass', function () {
	gulp.src('/css/main.scss')
		.pipe(plumber())
		.pipe(sass())
		.pipe(prefix('last 15 versions'))
		.pipe(gulp.dest('/_site/css'))
		.pipe(browserSync.stream());
});

// livereload and open project in browser

gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
	browserSync.init({
		port: 1337,
		server: {
			baseDir: outputDir
		}
	});
});

//---------------------------------watch

// Watch scss files for changes & recompile
// Watch html/md files, run jekyll & reload BrowserSync

gulp.task('watch', function () {
    gulp.watch('/_sass/**/*.scss', ['sass']);
    gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']);
});


// Default task, running just `gulp` will compile the sass,
// compile the jekyll site, launch BrowserSync & watch files.

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

Comments

[sim3x]

cat /css/main.scss

[lavezzi1]

sim3x: Что значит cat?

[sim3x]

lavezzi1: man cat

[sim3x]

lavezzi1: фейспалм
cat - concatenate files and print on the standard output

css/main.scss покажи

[lavezzi1]

sim3x: в нем список импортов
@импорт 'base/normalize';

[sim3x]

sim3x: используй тег code

Answer 1

[Дмитрий Кравченко]

уберите ведущий слэш отовсюду, с ним нода берет абсолютный путь, а вам нужен относительный

Comments

[lavezzi1]

Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
css/main.scss
1:1 invalid top-level expression
Details:
column: 1
line: 1
file: stdin
status: 1
messageFormatted: css/main.scss
1:1 invalid top-level expression

[Дмитрий Кравченко]

lavezzi1: это уже ошибка в sass коде, покажите что там в начале

[lavezzi1]

Дмитрий Кравченко: @ import 'base/normalize';

[Anton Filippov]

lavezzi1: перед импортом пробел не нужне

[Дмитрий Кравченко]

lavezzi1: поддерживаю предыдущего оратора :)

[lavezzi1]

Антон Ф.: Дмитрий Кравченко: я спецом сделал пробел, потому что есть пользователь с ником import, у меня нет пробела

[Дмитрий Кравченко]

lavezzi1: трудно удаленно понять в чем дело, попробуйте закомментировать все содержимое и построчно убирать комменты, нужно посмотреть что в normalize, проверить все пути (файл, кажется, лежит в _site, а подключаете из _sass)

Answer 2

[sim3x]

Тебе нужно или в гульпе показать откуда у тебя испорт идет, или в scss сделать путь

@import "../_sass/base/variables.sass";
...

Answer 3

[webdisigner]

gulp.task('sass', function () {
  gulp.src('css/main.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(prefix('last 15 versions'))
    .pipe(gulp.dest('_site/css'))
    .pipe(browserSync.stream());
});

gulp.task('watch', function () {
    gulp.watch('css/**/*.scss', ['sass']);
    gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_posts/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['browser-sync', 'sass', 'watch']);

Один совет, попробуй плагин all-tasks

Comments

[lavezzi1]

Зачем его пробовать?

[webdisigner]

lavezzi1: не приходится перечислять и придумывать переменные под каждый плагин, он автоматом присваивается, вот живой пример:

--gulpfile.js--

var gulp = require('gulp');
require('gulp-all-tasks')();
gulp.task('html', function(){
  gulp.src('index.html')
    .pipe(gulp_minify_html())
    .pipe(gulp_rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('.'));
});