Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.09.2015, 09:54
Новичок на форуме
Отправить личное сообщение для malgeorge Посмотреть профиль Найти все сообщения от malgeorge
 
Регистрация: 13.03.2013
Сообщений: 5

Gulp, проблема при компиляции sass
Проблема в таске sass ответственном за компиляцию sass. Все файлы sass собираются (include) в одном файле (style.sass). Всего 3 файла: main.scss, variables.scss и mixins.scss. При запуске gulp всё проходит и собирается полностью в файл style.min.css, при повторном запуске таска sass через gulp-watch (отслеживает все файлы в директории) изменением в одном из импортируемых файлов выдает ошибку "undefined variable" или "no mixin named..." в зависимости от файла, если изменяю сам файл style.scss (там где собираются остальные), все переменные и миксины компилируются нормально и всё работает.

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('watch', function() {
// 	gulp.watch([config.sassPath + '/*.scss'], ['styles']);
// 	gulp.watch([config.jsPath + '/*.js'], ['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";
Ответить с цитированием
  #2 (permalink)  
Старый 21.09.2015, 13:05
Новичок на форуме
Отправить личное сообщение для malgeorge Посмотреть профиль Найти все сообщения от malgeorge
 
Регистрация: 13.03.2013
Сообщений: 5

Помогла установка timeout в watch перед вызовом таска:
watch([config.sassPath + '/*.scss'], function(event, cb) {
setTimeout(function(){
gulp.start('sass');
}, 1000);
});

IDE sublime 2, видимо проблема была в задержке при сохранении файла, становится недоступен (блокируется?) либо ping сервера.
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2017, 11:43
Интересующийся
Отправить личное сообщение для pepel266 Посмотреть профиль Найти все сообщения от pepel266
 
Регистрация: 31.10.2015
Сообщений: 10

Да проблема именно в том, что watch пытается получить доступ к файлу раньше чем тот успел сохраниться на диске.... Проблема характерна для win7 и HDD. Использование setTimeOut решает проблему, но это своего рода хак. Если использовать плагин gulp-watch, то у него есть объект с опциями, который необходимо передавать вторым параметром. Подробнее можно узнать в документации
В итоге должно получиться следующее:
gulp.task('watch', function() {
    watch('dev/scss/**/*.scss', {readDelay: 100}, function(event, cb) {
            console.log(event.event + ' ' + event.path);
            gulp.start('sass');
    });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема обновления при удалении стиля taland Элементы интерфейса 1 21.10.2009 18:34
Проблема при работе с плагином jQuery Map Hilight REp0rtER jQuery 3 29.07.2009 22:10
Проблема при перезаписи iframe spheresh Общие вопросы Javascript 3 23.06.2009 18:06
проблема со сменой изображений при наведение Jack Элементы интерфейса 0 19.03.2009 22:13
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38