Как сделать чтобы правильно компилировались файлы?

Всем привет. Сейчас у меня вот такая структура папок take.ms/8Sfz6.
Раньше при каждом сохранении любого jade файла я видел вот такую картину в консоли take.ms/pR3oW

Сегодня добавил плагин changed = require('gulp-changed'),
Но теперь вообще обновляется все только при сохранении страниц из папки pages. Как сделать так, чтобы вне зависимости от того, какой jade файл я сохраняю, у меня происходила компиляция и при этом браузер обновлялся один раз?

Заранее огромное спасибо!

var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglifyjs'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename'),
    del = require('del'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    cache = require('gulp-cache'),
    jade = require('gulp-jade'),
    changed = require('gulp-changed'),
    autoprefixer = require('gulp-autoprefixer');


gulp.task('stylus', function() {
    return gulp.src(['app/static/styl/*.styl', '!app/static/styl/_*.styl'])
        .pipe(stylus({
            'include css': true
        }))
        .pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {
            cascade: true
        }))
        .pipe(gulp.dest('app/static/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        }
    });
});

gulp.task('scripts', function() {
    return gulp.src([
            'app/static/libs/jquery/dist/jquery.min.js',
            'app/static/libs/pjax/pjax.js',
            'app/static/libs/magnific-popup/jquery.magnific-popup.min.js',
            'app/static/libs/maskedinput/jquery.maskedinput.min.js',
            'app/static/libs/validate/jquery.validate.min.js',
            'app/static/libs/qtip/tooltipster.bundle.min.js',
            'app/static/libs/datepicker/jquery.datetimepicker.full.min.js',
            'app/static/libs/bxslider/jquery.bxslider.min.js'
        ])
        .pipe(concat('libs.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('app/static/js'));
});

gulp.task('csslibs', ['stylus'], function() {
    return gulp.src('app/static/css/libs.css')
        .pipe(cssnano())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('app/static/css/'));
});

// Работа с jade
gulp.task('jade', function() {
    gulp.src('app/jade/pages/*.jade')
        .pipe(changed('./app', {extension: '.html'}))
        .pipe(jade({
            pretty: true
        }))
        .pipe(gulp.dest('./app'));
    gulp.src('app/jade/ajax_content/*/*.jade')
        .pipe(jade({
            pretty: true
        }))
        .pipe(gulp.dest('./app/ajax_content/'));
});

gulp.task('watch', ['browser-sync', 'csslibs', 'scripts'], function() {
    gulp.watch('app/static/styl/**/*.styl', ['stylus']);
    gulp.watch('app/jade/**/*.jade', ['jade']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/static/js/*.js', browserSync.reload);
});

gulp.task('clean', function() {
    return del.sync('prodact/t');
});

gulp.task('img', function() {
    return gulp.src('app/static/img/**/*')
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{
                removeViewBox: false
            }],
            une: [pngquant()]
        })))
        .pipe(gulp.dest('prodact/t/static/img'));
});

gulp.task('build', ['clean', 'img', 'stylus', 'scripts'], function() {
    var buildCss = gulp.src([
            'app/static/css/main.css',
            'app/static/css/media.css',
            'app/static/css/libs.min.css'
        ])
        .pipe(gulp.dest('prodact/t/static/css'));
    var buildFonts = gulp.src('app/static/fonts/**/*')
        .pipe(gulp.dest('prodact/t/static/fonts'));

    var buildJs = gulp.src('app/static/js/**/*')
        .pipe(gulp.dest('prodact/t/static/js'));

    var buildHtml = gulp.src([
        'app/*html',
        'app/**/*html'
        ])
        .pipe(gulp.dest('prodact/t'));
});


gulp.task('clear', function() {
    return cache.clearAll();
});

gulp.task('default', ['watch']);
  • Вопрос задан
  • 357 просмотров
Решения вопроса 1
Zoxon
@Zoxon
Веб-разработчик
У меня тоже раньше была такая проблема. На сколько я смог разобраться в этом виноват gulp.
Пришлось заменить gulp.watch на gulp-watch и использовать run-sequence
Сам таск
Watch к нему
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Kanonier8
// Работа с jade
gulp.task('jade', function() {
    gulp.src('app/jade/pages/**/*.jade')
        .pipe(changed('./app', {extension: '.html'}))
        .pipe(jade({
            pretty: true
        }))
        .pipe(gulp.dest('./app'));
    gulp.src('app/jade/ajax_content/**/*.jade')
        .pipe(jade({
            pretty: true
        }))
        .pipe(gulp.dest('./app/ajax_content/'));
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы