diff --git a/.npmrc b/.npmrc index d27e461..78080d0 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -loglevel=silent +# loglevel=silent diff --git a/createBlock.js b/createBlock.js index e453c12..97fd2db 100644 --- a/createBlock.js +++ b/createBlock.js @@ -92,7 +92,7 @@ if(blockName) { // Если это Pug else if(extention == 'pug') { - fileContent = `mixin ${blockName}()\n div text\n`; + fileContent = `mixin ${blockName}()\n div ${blockName}\n`; let includeMixin = 'include blocks/' + blockName + '/' + blockName + '.pug'; diff --git a/gulpfile.js b/gulpfile.js index d6be861..00bdefd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,8 +101,8 @@ gulp.task('html', function() { // Компиляция pug gulp.task('pug', function() { return gulp.src([ - dirs.source + '/*.pug', - '!' + dirs.source + '/mixins.pug', + dirs.source + '/*.pug', + '!' + dirs.source + '/mixins.pug', ]) .pipe(plumber()) .pipe(pug()) @@ -254,6 +254,7 @@ gulp.task('serve', ['build'], function() { // Слежение за стилями gulp.watch([ dirs.source + '/scss/style.scss', + dirs.source + '/scss/variables.scss', dirs.source + '/blocks/**/*.scss', ], ['style']); // Слежение за html diff --git a/package.json b/package.json index 887c6c5..80b5560 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "url": "https://github.com/epixx/start-kit" }, "devDependencies": { - "autoprefixer": "^7.1.6", + "autoprefixer": "^8.0.0", "browser-sync": "^2.14.0", "css-mqpacker": "^6.0.1", "del": "^3.0.0", @@ -24,7 +24,7 @@ "gulp-concat": "^2.6.0", "gulp-gh-pages": "^0.5.4", "gulp-html-beautify": "^1.0.1", - "gulp-imagemin": "^3.0.3", + "gulp-imagemin": "^4.1.0", "gulp-newer": "^1.2.0", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.1.0", @@ -33,7 +33,7 @@ "gulp-rename": "^1.2.2", "gulp-replace": "^1.0.0", "gulp-sass": "^4.0.1", - "gulp-sequence": "^0.4.6", + "gulp-sequence": "^1.0.0", "gulp-sourcemaps": "^2.6.1", "gulp-svgmin": "^1.2.2", "gulp-svgstore": "^6.0.0", diff --git a/readme.md b/readme.md index d53ed49..1b9f3bb 100644 --- a/readme.md +++ b/readme.md @@ -12,6 +12,8 @@ Остановка: Ctrl + C +Добавление нового блока: `node createBlock.js имя-блока`. Будут созданы папка блока, `.scss` и `.pug` файлы, добавлены импорт стилей и импорт примеси блока. + ## К прочтению / ознакомлению diff --git a/src/blocks/main-nav/main-nav.pug b/src/blocks/main-nav/main-nav.pug new file mode 100644 index 0000000..e5324f4 --- /dev/null +++ b/src/blocks/main-nav/main-nav.pug @@ -0,0 +1,14 @@ +mixin main-nav(selected) + + - + var menu = { + 'Home': '/home', + 'Blog': '/blog', + 'Contact': '/contact' + }; + + nav.main-nav + ul.main-nav__list + each val, key in menu + li(class= selected.toLowerCase() === key.toLowerCase() ? 'main-nav__item main-nav__item--active' : 'main-nav__item') + a(href=val, title=key)= key diff --git a/src/blocks/main-nav/main-nav.scss b/src/blocks/main-nav/main-nav.scss new file mode 100644 index 0000000..82ad640 --- /dev/null +++ b/src/blocks/main-nav/main-nav.scss @@ -0,0 +1,9 @@ +// В этом файле должны быть стили для БЭМ-блока main-nav, его элементов, +// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий... +// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority + +.main-nav { + + $block-name: &; // #{$block-name}__element + +} diff --git a/src/index.pug b/src/index.pug index b307651..38d5cee 100644 --- a/src/index.pug +++ b/src/index.pug @@ -8,6 +8,10 @@ block meta //- link(rel="stylesheet", href="some.css") //- script(src='some.js') +block nav + -var selected = 'blog'; + +main-nav(selected) + block content p Растровые спрайты: span.chrome(style="display: inline-block;") diff --git a/src/mixins.pug b/src/mixins.pug index 1d43312..3bee34b 100644 --- a/src/mixins.pug +++ b/src/mixins.pug @@ -1,2 +1,3 @@ //- Подключение примесей +include blocks/main-nav/main-nav.pug diff --git a/src/scss/style.scss b/src/scss/style.scss index 5407f3e..6cd5248 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -10,5 +10,4 @@ // БЭМ-блоки. Один БЭМ-блок = 1 файл. ВСЕГДА. @import './src/blocks/page/page.scss'; -@import './src/blocks/TEST/TEST.scss'; -@import './src/blocks/TEST2/TEST2.scss'; +@import './src/blocks/main-nav/main-nav.scss'; diff --git a/src/templates/layout-home.pug b/src/templates/layout-home.pug index 7e5503c..3a76016 100644 --- a/src/templates/layout-home.pug +++ b/src/templates/layout-home.pug @@ -19,8 +19,12 @@ html(class="no-js page", lang="ru") body .page__inner .page__content + div Тут «шапка» + block nav + block content + .page__footer-wrapper div Тут «подвал»