@papa_schlumpf

Почему gulp-watch правильно собирает sass только при запуске из импортирующего файла?

Структура директории где лежат кастомные scss файлы:
main.scss //все кастомные стили
mixins.scss //кастомные mixins
variables.scss //кастомные variables
style.scss //здесь импортируем все вышеозначенные файлы + bootstrap с fontawesome

Gulp (на Ubuntu 14. server) следит за зменениями в этой директории и запускает watch->sass при изменении файлов, проблема в том, что файлы компилируются нормально только если запустить watch сохранением файла style.scss (там где все директивы @import). При сохранении файлов mixins или variables выдает ошибку отсуствия миксин или переменной соответственно, если сохраняю файл main.scss, компилируется без ошибок но в итоге в файл css попадает только bootstrap и fontawesome, кастомные стили не добавляются вообще.

В чем может быть проблема?

gulpfile.js
var gulp = require('gulp'),
	sass = require('gulp-sass'),
	notify = require("gulp-notify"),
	concat = require('gulp-concat'),
	minifycss = require('gulp-minify-css'),
	uglify = require('gulp-uglify'),
	rename = require('gulp-rename')
	bower = require('gulp-bower')
	merge = require('merge-stream')
	watch = require('gulp-watch');

var config = {
	destPath: './dist',
	sassPath: './src/sass',
	jsPath: './src/js',
	bowerDir: './src/components'
}

gulp.task('bower', function() {
	return bower()
	.pipe(gulp.dest(config.bowerDir));
});

gulp.task('icons', function() {
	var fontawesome = gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
	.pipe(gulp.dest('./src/fonts'));

	var bootstrap = gulp.src(config.bowerDir + '/bootstrap-sass/assets/fonts/bootstrap/**.*')
	.pipe(gulp.dest('./src/fonts/bootstrap'));

	return merge(fontawesome, bootstrap);
});
 
 
gulp.task('sass', function() {
	console.log(config.sassPath);
    var stream = gulp.src([config.sassPath + '/style.scss'])
        .pipe(sass().on('error', sass.logError))
        // .pipe(concat('style.css'))
        .pipe(minifycss())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest(config.destPath));
    return stream;
});

gulp.task('js', function() {
    var stream = gulp.src([config.bowerDir + '/jquery/dist/jquery.js', config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jsPath + '/*.js'])
        .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(rename('script.min.js'))
        .pipe(gulp.dest(config.destPath)); 
    return stream;
});

gulp.task('watch', function(){
    watch([config.sassPath + '/*.scss'], function(event, cb) {
        gulp.start('sass');
    });
    watch([config.jsPath + '/*.js'], function(event, cb) {
        gulp.start('js');
    });
});

gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']);


style.scss
@import "./variables.scss";
@import "./mixins.scss";
@import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
@import "../components/font-awesome/scss/font-awesome.scss";
@import "./main.scss";
  • Вопрос задан
  • 1439 просмотров
Решения вопроса 1
@papa_schlumpf Автор вопроса
Помогла установка timeout в watch перед вызовом таска:
watch([config.sassPath + '/*.scss'], function(event, cb) {
    	setTimeout(function(){
	        gulp.start('sass');
    	}, 1000);
});

IDE sublime 2, видимо проблема была в задержке при сохранении файла, становится недоступен (блокируется?) либо ping сервера.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ROBsoer
Это проблема Sublime. Тоже боролся с ней.
Решение описано на репозитории плагина gulp-sass
Помогает установка настройки atomic_save в true
"atomic_save": true
Пишут, что проблема только на винде и только в Sublime
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы