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

Question

[Анатолий Саламатин]

Всем привет. Сейчас у меня вот такая структура папок 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']);

Answer 1

[Константин Величко]

У меня тоже раньше была такая проблема. На сколько я смог разобраться в этом виноват gulp.
Пришлось заменить gulp.watch на gulp-watch и использовать run-sequence
Сам таск
Watch к нему

Comments

[Анатолий Саламатин]

Спасибо!

Answer 2

[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/'));
});

Comments

[Анатолий Саламатин]

не помогает( Также компилируется только если сохраняю то, что в папке pages

[Kanonier8]

Дело в том, что ваши таски и структура каталогов немного не состыковываются:
1. Мы изменили jade файл
2. Галп реагирует на это gulp.watch('app/jade/**/*.jade', ['jade']); и запускает задачу jade
3. Задача Jade пытается сопоставить пути:
3.1. Сначала ищет изменения jade файлов в каталоге app/jade/pages/
3.2 Потом ищет изменения jade файлов в каталоге app/jade/ajax_content/
4. Если файл который вы отредактировали лежит не в тех двух вышеперечисленных директориях, то ничего не произойдет, т.к. вы используете changed и он не выполнит задачу если ничего в этом файле не изменилось

[Анатолий Саламатин]

Kanonier8: а как сделать структуру правильной? Мне не надо, чтобы файлы из папок модулес и коммон преобразовались в html. А если я их засуну в папку pages, то они именно это и будут делать.

[Kanonier8]

Попробуйте поменять эту строчку
gulp.src('app/jade/pages/**/*.jade')
на эту
gulp.src(['app/jade/pages/**/*.jade', 'app/jade/common/**/*.jade', 'app/jade/modules/**/*.jade' ])

[Анатолий Саламатин]

он все из этих папок скомпилировал в одну папку take.ms/qdSef ) тоже не то

[Kanonier8]

ну тогда пишите так
gulp.src('app/**/*.jade')

если нужно исключить директорию layout, то
gulp.src(['app/**/*.jade', '!app/layout/**/*.jade'])