Как использовать Jade в моем случае?

Question

[lavezzi1]

Здравствуйте!
Хочу понять, как пользоваться jade в моем случае.
Верстаю на бутстрапе сайт, есть две навигации (вверху и справа).
Страниц много (есть типовые, но контент на каждой странице разный).
Содержимое менюшек тоже разное в зависимости от страниц.

Подскажите, пожалуйста, что именно использовать, extends, block, include и в каких случаях. Спасибо

Answer 1

[jlekapb]

Я бы записал меню в json файл и выводил бы по условию.

layout.jade

include ../helpers/mixins
html
    body
        block menu
            if menuID === 1
                +menu(1)
        block content

page1.jade

extends ../layouts/layout
block menu
    - var menuID = 1;
block content
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

mixins.jade

//- тут создаете миксин, который принимает аргумент и выводит по нему часть json.
+menu(menuID)

ps. если страниц много, возможно имеет смысл каждую страницу складывать в папку, в которой будет лежать меню для этой страницы.

Comments

[Dark_Scorpion]

зачем условие проверять если можно напрямую написать? Экономия места кодом? А не проще тогда include файл с содержанием меню

[lavezzi1]

Dark_Scorpion: я вообще вопрос свой задал, так как захотел переписать уже написанный мной код, я делал все через include, накопилось около 80 файлов и из за этого gulp сборка не работает, точнее jade файлы не успевает обновить и приходится через F5 обновлять чтобы увидеть изменения.

[lavezzi1]

Dark_Scorpion: Вот думаю если переписать то может быстрей будет работать компиляция

[jlekapb]

Dark_Scorpion: а если какие-то изменения в структуре меню, то прийдется каждый файл править?

[jlekapb]

lavezzi1: 80 инклудов или 80 страниц? может дело в gulpfile?
Прикрепите файл, попробуем разобраться.

[lavezzi1]

jlekapb: 40 файлов и 45 паршлов для инклюдов.
Решил пока что косытлем в виде делая 2000. если предложите что то дельное буду рад. Jade-inheritance и кеш пробовал, временно помогает, потом опять начинается
// plugins for development
var gulp = require('gulp'),
rimraf = require('rimraf'),
jade = require('gulp-jade'),
sass = require('gulp-sass'),
inlineimage = require('gulp-inline-image'),
prefix = require('gulp-autoprefixer'),
csscomb = require('gulp-csscomb'),
plumber = require('gulp-plumber'),
dirSync = require('gulp-directory-sync'),
browserSync = require('browser-sync').create(),
concat = require('gulp-concat');

// plugins for build
var purify = require('gulp-purifycss'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
csso = require('gulp-csso'),
combineMq = require('gulp-combine-mq');

//plugins for testing
var html5Lint = require('gulp-html5-lint');

var assetsDir = 'source/';
var outputDir = 'public/';
var buildDir = 'production/';

//----------------------------------------------------Compiling
gulp.task('jade', function () {
gulp.src([assetsDir + 'pages/*.jade', '!' + assetsDir + 'pages/_*.jade'])
.pipe(plumber())
.pipe(jade({pretty: true}))
.pipe(gulp.dest(outputDir))
.pipe(browserSync.stream());
});

gulp.task('sass', function () {
gulp.src([assetsDir + 'sass/**/*.scss', '!' + assetsDir + 'sass/**/_*.scss'])
.pipe(plumber())
.pipe(sass())
.pipe(inlineimage())
.pipe(prefix('last 3 version', '> 1%', 'safari 5', 'ie 8', 'ie 7', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(csscomb())
.pipe(gulp.dest(outputDir + 'css/'))
.pipe(browserSync.stream());
});

gulp.task('jsConcat', function () {
return gulp.src(assetsDir + 'js/all/**/*.js')
.pipe(concat('all.js', {newLine: ';'}))
.pipe(gulp.dest(outputDir + 'js/'))
.pipe(browserSync.stream());
});

//----------------------------------------------------Compiling###

//-------------------------------------------------Synchronization
gulp.task('imageSync', function () {
return gulp.src('')
.pipe(plumber())
.pipe(dirSync(assetsDir + 'img/', outputDir + 'img/', {printSummary: true}))
.pipe(browserSync.stream());
});

gulp.task('jsSync', function () {
return gulp.src(assetsDir + 'js/*.js')
.pipe(plumber())
.pipe(gulp.dest(outputDir + 'js/'))
.pipe(browserSync.stream());
});
//-------------------------------------------------Synchronization###

//watching files and run tasks
gulp.task('watch', function () {
gulp.watch(assetsDir + 'pages/**/*.jade', ['jade']);
gulp.watch(assetsDir + 'sass/**/*.scss', ['sass']);
gulp.watch(assetsDir + 'js/**/*.js', ['jsSync']);
gulp.watch(assetsDir + 'js/all/**/*.js', ['jsConcat']);
gulp.watch(assetsDir + 'img/**/*', ['imageSync']);
});

//livereload and open project in browser
gulp.task('browser-sync', function () {
browserSync.init({
port: 3000,
reloadDelay: 2000,
server: {
baseDir: outputDir
}
});
});

//---------------------------------building final project folder
//clean build folder
gulp.task('cleanBuildDir', function (cb) {
rimraf(buildDir, cb);
});

//minify images
gulp.task('imgBuild', function () {
return gulp.src(outputDir + 'img/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(buildDir + 'img/'))
});

//copy html
gulp.task('htmlBuild', function () {
return gulp.src(outputDir + '**/*.html')
.pipe(gulp.dest(buildDir))
});

//copy and minify js
gulp.task('jsBuild', function () {
return gulp.src(outputDir + 'js/**/*')
.pipe(uglify())
.pipe(gulp.dest(buildDir + 'js/'))
});

//copy, minify css
gulp.task('cssBuild', function () {
return gulp.src(outputDir + 'css/**/*')
.pipe(purify([outputDir + 'js/**/*', outputDir + '**/*.html']))
.pipe(combineMq({
beautify: false
}))
.pipe(csso())
.pipe(gulp.dest(buildDir + 'css/'))
});

//testing your build files
gulp.task('validation', function () {
return gulp.src(buildDir + '**/*.html')
.pipe(html5Lint());
});

gulp.task('default', ['jade', 'sass', 'imageSync', 'jsConcat', 'jsSync', 'watch', 'browser-sync']);

gulp.task('build', ['cleanBuildDir'], function () {
gulp.start('imgBuild', 'htmlBuild', 'jsBuild', 'cssBuild');
});

[Dark_Scorpion]

jlekapb: изменение в структуре меню и каждый фал править? А разве у вас не один файл на меню?

[jlekapb]

lavezzi1: не смогу подсказать(
Dark_Scorpion: я предложил два варианта.
1. Все меню собрать в один json файл и выбирать нужный фрагмент через переменную
2. Организовать страницы как блоки и складывать в папку с блоком нужное меню. При компиляции проверять существование файла у каждого блока и выводить, если существует.