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"; |
Помогла установка timeout в watch перед вызовом таска:
watch([config.sassPath + '/*.scss'], function(event, cb) { setTimeout(function(){ gulp.start('sass'); }, 1000); }); IDE sublime 2, видимо проблема была в задержке при сохранении файла, становится недоступен (блокируется?) либо ping сервера. |
Да проблема именно в том, что 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'); }); }); |
Часовой пояс GMT +3, время: 02:18. |