Не знаю с чего проблема началась, но не давно livereload начал странно себя вести, а именно делать reload только через 1 изменение в файле. Обновляет он страницу всегда, но изменение на страницы появляются только после 2 изменений подряд. Т.е. добавляю на страницу Текст . Смотрю на страницу, не чего не появилось. Добавляю "1" к "Текст" и на странице появляется просто "Текст". Еще вчера все было нормально, а теперь такая фигня.
Вот gulpfile
var gulp = require('gulp'),
jade = require('gulp-jade'),
stylus = require('gulp-stylus'),
csso = require('gulp-csso'),
myth = require('gulp-myth'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
csscomb = require('gulp-csscomb'),
connect = require('gulp-connect');
var autoprefixer = require('gulp-autoprefixer');
var outputDir = 'public';
var assetDir = 'assets';
// Собираем Stylus
// Собираем Stylus
gulp.task('stylus', function() {
gulp.src('./assets/stylus/*.styl')
.pipe(stylus()) // собираем stylus
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(autoprefixer())
//.pipe(myth()) // добавляем префиксы - http://www.myth.io/
.pipe(gulp.dest(outputDir+'/css/')) // записываем css
.pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем css
gulp.task('csstouse', function() {
gulp.src('./assets/stylus/*.css')
.pipe(autoprefixer())
.pipe(gulp.dest(outputDir+'/css/')) // записываем css
.pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем html из Jade
gulp.task('jade', function() {
gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
.pipe(jade({
pretty: true
})) // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(gulp.dest(outputDir)) // Записываем собранные файлы
.pipe(connect.reload()); // даем команду на перезагрузку страницы
});
// Собираем JS
gulp.task('js', function() {
gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
.pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
.pipe(gulp.dest(outputDir+'/js'))
.pipe(connect.reload()); // даем команду на перезагрузку страницы
});
gulp.task('images', function() {
gulp.src(assetDir+'/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(outputDir+'/img'))
});
gulp.task('connect', function() {
connect.server({
root: outputDir,
livereload: true
});
});
// Запуск сервера разработки gulp watch
gulp.task('watch', function() {
// Предварительная сборка проекта
gulp.run('stylus');
gulp.run('csstouse');
gulp.run('jade');
gulp.run('images');
gulp.run('js');
gulp.watch(assetDir+'/stylus/**/*.styl', function() {
gulp.run('stylus');});
gulp.watch(assetDir+'/stylus/**/*.css', function() {
gulp.run('csstouse');});
gulp.watch(assetDir+'/template/**/*.jade', function() {
gulp.run('jade');});
gulp.watch(assetDir+'/img/**/*', function() {
gulp.run('images');});
gulp.watch(assetDir+'/js/**/*', function() {
gulp.run('js');});
});
gulp.task ('default', ['watch','connect']);
var buildDir = 'build';
gulp.task('build', function() {
// css
gulp.src(assetDir+'/stylus/style.styl')
.pipe(stylus()) // собираем stylus
.pipe(myth()) // добавляем префиксы - http://www.myth.io/
.pipe(csso()) // минимизируем css
.pipe(gulp.dest(buildDir+'/css/')) // записываем css
// jade
gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
.pipe(jade())
.pipe(gulp.dest(buildDir))
// js
gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(gulp.dest(buildDir+'/js'));
// image
gulp.src(assetDir+'/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(buildDir+'/img'))
});
Переделал свой Gulpfile по совету, но походу плохо переделал, что не так? У меня он теперь бесконечно картинки сжимает, пока ошибка не выскочит.
var gulp = require('gulp'),
jade = require('gulp-jade'),
stylus = require('gulp-stylus'),
csso = require('gulp-csso'),
myth = require('gulp-myth'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
csscomb = require('gulp-csscomb'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
sequence = require('gulp-sequence');
var autoprefixer = require('gulp-autoprefixer');
var outputDir = 'public';
var assetDir = 'assets';
// Собираем Stylus
// Собираем Stylus
gulp.task('stylus', function() {
gulp.src('./assets/stylus/*.styl')
.pipe(stylus()) // собираем stylus
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(autoprefixer())
//.pipe(myth()) // добавляем префиксы - http://www.myth.io/
.pipe(gulp.dest(outputDir+'/css/')) // записываем css
.pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем css
gulp.task('csstouse', function() {
gulp.src('./assets/stylus/*.css')
.pipe(autoprefixer())
.pipe(gulp.dest(outputDir+'/css/')) // записываем css
.pipe(connect.reload()); // даем команду на перезагрузку css
});
// Собираем html из Jade
gulp.task('jade', function() {
gulp.src([assetDir+'/template/*.jade', '!'+assetDir+'/template/_*.jade'])
.pipe(jade({
pretty: true
})) // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(gulp.dest(outputDir)) // Записываем собранные файлы
.pipe(connect.reload()); // даем команду на перезагрузку страницы
});
// Собираем JS
gulp.task('js', function() {
gulp.src([assetDir+'/js/**/*.js', '!'+assetDir+'/js/vendor/**/*.js'])
.pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
.pipe(gulp.dest(outputDir+'/js'))
.pipe(connect.reload()); // даем команду на перезагрузку страницы
});
gulp.task('images', function() {
gulp.src(assetDir+'/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest(outputDir+'/img'))
});
gulp.task('connect', function() {
connect.server({
root: outputDir,
livereload: true
});
});
// Запуск сервера разработки gulp watch
gulp.task('watch', function() {
watch(assetDir+'/stylus/**/*.styl', function() {
gulp.run('stylus');});
watch(assetDir+'/stylus/**/*.css', function() {
gulp.run('csstouse');});
watch(assetDir+'/template/**/*.jade', function() {
gulp.run('jade');});
watch(assetDir+'/img/**/*', function() {
gulp.run('images');});
watch(assetDir+'/js/**/*', function() {
gulp.run('js');});
});
gulp.task ('default', sequence(['stylus','jade','js'],'images','csstouse','watch','connect'));
