Моя логика: Использую Gulp - Bower - Bootstrap. Я компилирую бутстрап из sass файла с измененными переменными в bootstrap-custom.css, указываю этот файл в bower.json - main. Вставляю ссылку на него в html с помощью wiredep, потом объединяю библиотеки в vendor.css с помощью useref и отправляю всё в build.
При изменении каких-либо переменных в bootstrap-user-custom нужно снова скомпилировать новый bootstrap-custom, и снова собрать html. Проблема в том, что в моём случае в файл с вновь скомпилированный бутстрапом мои изменения попадают, а в сборку нет, только со второго прохода. Ставил зависимость таска html:build от boot:compile - ничего. Пробовал вручную указать таймаут для html:build - получается, но только не на Live сервере. Сломал голову, не понимаю что пропустил, буду очень благодарен помощи!
Код gulpfile.js и index.html в части касающейся проблемы прилагаю
var path = {
build: {
//Адреса куда ложить файлы сборки
html: 'build/',
js: 'build/js/',
css: 'build/css/',
img: 'build/img/',
fonts: 'build/fonts/'
},
src: {
//Откуда брать исходники
html: 'src/*.html',
js: 'src/js/main.js',
css: 'src/style/main.styl',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
watch: {
//За изменениями каких файлов мы хотим наблюдать
html: 'src/**/*.html',
js: 'src/js/**/*.js',
css: 'src/style/**/*.styl',
scss: 'src/style/**/*.scss',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
clean: './build',
bootstrap: {
src: 'bower_components/bootstrap/scss/bootstrap-custom.scss',
dist: 'bower_components/bootstrap/dist/css'
}
};
var config = {
server: {
baseDir: "./build"
},
tunnel: true,
host: 'localhost',
port: 9000,
logPrefix: "laplandin"
}; //Настройки нашего live-сервера
gulp.task('boot:compile', () => {
gulp.src(path.bootstrap.src)
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest(path.bootstrap.dist));
});
gulp.task('html:build', ['boot:compile'], function() {
//setTimeout(function() {
gulp.src(path.src.html) //выбор фалов по нужному пути
.pipe(rigger()) //вставляет код файла вместо указанного к файлу пути
.pipe(wiredep()) // устанавливает ссылки на зависимости bower и вставляет их в проект
.pipe(useref()) // собирает сторонние библиотеки в vendor файл
.pipe(gulp.dest(path.build.html)) //папка назначения
.pipe(reload({stream:true})); //Перезагрузка сервера
//}, 1000)
});
gulp.task('build', [
'html:build',
'js:build',
'css:build',
'fonts:build',
'image:build'
]);
gulp.task('watch', function() {
watch([path.watch.scss], function(event, cb) {
gulp.start('html:build');
});
});
gulp.task('default', ['build', 'webserver', 'watch']);
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- build:css css/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<link rel="stylesheet" href="css/main.css">
<!-- build:js js/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
</head>
<body>
<div class="site-wrapper container">
//= template/nav.html
//= template/header.html
//= template/footer.html
</div>
//= template/article-item-template.html
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>