lavezzi1
@lavezzi1

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

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

Текущий 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']);
  • Вопрос задан
  • 1620 просмотров
Пригласить эксперта
Ответы на вопрос 3
уберите ведущий слэш отовсюду, с ним нода берет абсолютный путь, а вам нужен относительный
Ответ написан
sim3x
@sim3x
Тебе нужно или в гульпе показать откуда у тебя испорт идет, или в scss сделать путь
@import "../_sass/base/variables.sass";
...
Ответ написан
webdisigner
@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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы