mass upgrade

.gitignore

@@ -1,9 +1,11 @@
 # See https://help.github.com/articles/ignoring-files for more about ignoring files.
-#
+
 
 
 node_modules/
 
 build/
 
-src/libs/
+src/libs/
+
+src/style/scss_components/scss_sprite/

README.md

@@ -1,2 +1,2 @@
 # Sborshchik
-сборка фронтенда
+# сборка фронтенда

bower.json

@@ -18,7 +18,6 @@
   ],
   "dependencies": {
     "normalize.css": "*",
-    "jquery": "3.*",
-    "bourbon": "^4.2.7"
+    "jquery": "3.*"
   }
 }

gulp/config.js

@@ -30,7 +30,8 @@ module.exports = {
   },
 
   'scripts': {
-    'src' : './src/js/**/*.js',
+
+    'src' : './src/js/*.js',
     'dest': './build/js',
     'watch': 'src/js/**/*.js'
   },
@@ -46,36 +47,39 @@ module.exports = {
       'svgIcons': './src/img/svgImages/svgIcons/**/*.svg',
 
 
-      'pngIconsForSprite': './src/img/rasterSprites/pngToSprite/*.png'
+      'spriteSrcFolder': './src/img/rasterSprites/'
     },
-
+ 
     'dest': {
       'rasterImages': './build/img/rasterImages/',
       'svgImages': './build/img/svgImages/',
 
       //that need for svg
-      'svgIcons': './build/img/svgImages/svgIcons/',
-      'svgSymbol': './build/img/svgImages/svgSymbol/',
+      'svgIcons': './build/img/svgImages/svgIcons/', 
+
+      // для случая, если svg-sprite загружается из localstorage файлом svgToLocalStorage.js
+      'externalSvgSymbol': './build/img/svgImages/svgSymbol/',
+      // для случая, если svg-sprite нужно вставлять прямо при сборке
+      'internalSvgSymbol' : './src/img/svgImages/svgSprite/',
 
-      'pngSprite': './build/img/pngSprites/'
+
+      'spriteDestFolder': './build/img/pngSprites/'
     },
 
     'watch': {
       'svgIcons': 'src/img/svgImages/svgIcons/**/*.svg',
       'rasterImages': 'src/img/rasterImages/**/*',
-      // директория для теста
-      'pngIconsForSprite': 'src/img/rasterSprites/pngToSprite/*.png'
+
+      'pngIconsForSprite': 'src/img/rasterSprites/**/*.png'
     }
   },
 
   'html': {
 
-    'src': './src/*.html',
+    'src': './src/*.njk',
     'dest': './build/',
-
 
-    'watchPages': 'src/*.html',
-    'watchTemplates': 'src/html_components/**/*.html'
+    'watch': ['src/*.njk', 'src/html_components/**/*.njk']
   },
 
   'fonts': {
@@ -100,13 +104,13 @@ module.exports = {
 
         'root':       './build',
         'img':        './build/img/rasterImages',
-        'pngSprite':  './build/img/pngSprite',
+        'pngSprite':  './build/img/pngSprites',
         'html':       './build/*.html',
         'svg':        './build/img/svgImages',
         // 'svgSprite':  './build/img/svg/symbol',
         // 'svgIcons':   './build/img/svg/svgicons',
         'js':         './build/js',
-        'fonts':      './build/fonts/'
+        'fonts':      './build/fonts'
     },
   }
 };

gulp/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+require('events').EventEmitter.prototype._maxListeners = 100;
+
 var fs = require('fs');
 var onlyScripts = require('./utils/scriptFilter');
 var tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);

gulp/tasks/0_buildSvgSymbol.js

@@ -12,6 +12,10 @@ gulp.task('buildSvgSymbol', function(){
   // create svg-symbol sprite from svg icons
 
   return gulp.src( config.images.src.svgIcons )
+    .pipe(p.plumber(function (er) {
+        console.log(er.toString());
+        this.emit('end');
+     }))
     .pipe(p.imagemin({  
       verbose: true,
       svgoPlugins: [{removeViewBox: false}]
@@ -34,8 +38,14 @@ gulp.task('buildSvgSymbol', function(){
       parserOptions: {xmlMode: true}
     }))
     .pipe(p.rename('symbols.svg'))
-    // .pipe(gulp.dest(paths.src.imgFolder + 'svg/svgsymbol/'))
-    .pipe(gulp.dest( config.images.dest.svgSymbol ))
-    .pipe(reload({stream: true}))
+
+    // строка ниже - путь до папки,в которой лежит svg-спрайт, 
+    // который будет тягать svgToLocalStorage.js. По умолчанию выключен.
+    // .pipe(gulp.dest( config.images.dest.externalSvgSymbol ))
+
+    // строка ниже - путь до папки, в которой лежит svg-спрайт, 
+    // который будет вставлен в html при сборке. По умочанию включен.
+    .pipe(gulp.dest( config.images.dest.internalSvgSymbol ))
+    .pipe(reload({stream: true}));
 
 });

gulp/tasks/12_buildPngSprite.js

@@ -1,57 +1,51 @@
+
+
 var gulp = require('gulp');
-// var spritesmith = require('gulp.spritesmith');
 var config = require('../config');
 var p = require('gulp-load-plugins')();
 var pngquant  = require('imagemin-pngquant'); 
 var bufferino = require('vinyl-buffer');
 var merge = require('merge-stream');
+var path = require('path');
+
+
+
+// то,куда будут складываться препроцессорные файлы с переменными спрайта
+var scssDestFolder = 'src/style/scss_components/scss_sprite/';
+
+
+gulp.task('buildPngSprite', p.folders(config.images.src.spriteSrcFolder, function (folder) { 
+
+    var imgURLinCSS = '../img/pngSprites/' + folder + '/' + folder + '.png';
+
+    var spriteData = gulp.src( path.join(config.images.src.spriteSrcFolder, folder,'*.png') )
+      .pipe(p.plumber({
+          handleError: function (err) {
+              console.log(err);
+              this.emit('end');
+          }
+      }))
+      .pipe(p.spritesmith({
+        imgName: folder + '.png',
+        cssName: '_'+ folder + '.scss',
+        imgPath: imgURLinCSS,
+        padding: 1
+      }));
+
+    var imgStream = spriteData.img
+      // DEV: We must buffer our stream into a Buffer for `imagemin` 
+      .pipe(bufferino())
+      .pipe(p.cache(p.imagemin({ 
+        verbose: true,
+        interlaced: true,
+        progressive: true, 
+        use: [pngquant()],
+      })))
+      .pipe(gulp.dest( config.images.dest.spriteDestFolder + folder ));
+
+     var cssStream = spriteData.css
+      .pipe(gulp.dest( scssDestFolder ));
 
-
-gulp.task('buildPngSprite', function () { // тест спрайтоварильщика
-
-  /*
-     pngIconsForSprite  - это директория,которая будет подвержена переимнованию,
-                        например, для png картинок отдельного спрайта
-      
-  */
-
-  // тестовый путь
-  var spriteData = gulp.src( config.images.src.pngIconsForSprite )
-  .pipe(p.spritesmith({
-    imgName: 'pngIconSprite.png',
-    cssName: '_pngIconSprite.scss',
-    imgPath: '../img/pngSprites/pngIconSprite.png',
-    padding: 2
-  }));
-
-  var imgStream = spriteData.img
-    // DEV: We must buffer our stream into a Buffer for `imagemin` 
-    .pipe(bufferino())
-    .pipe(p.cache(p.imagemin({ 
-      verbose: true,
-      interlaced: true,
-      progressive: true, 
-      use: [pngquant()],
-    })))
-    .pipe(gulp.dest( config.images.dest.pngSprite ));
-
-  // Pipe CSS stream through CSS optimizer and onto disk 
-  var cssStream = spriteData.css
-    .pipe(gulp.dest('src/style/scss_components/'));
-
   // Return a merged stream to handle both `end` events 
- return merge(imgStream, cssStream);
-
-
-/*    var spriteData2 = gulp.src('src/img/rasterSprites/pngToSprite/*.png')
-    .pipe(spritesmith({
-      imgName: 'mysprite228.png',
-      cssName: '_mysprite228.scss',
-      imgPath: '../img/rasterImages/mysprite228.png',
-      padding: 2
-    }));
-
-    var cssstr = spriteData2.css.pipe(gulp.dest('src/style/scss_components/'));
-    var imgstr = spriteData2.img.pipe(gulp.dest('build/img/rasterImages/'));
-    merge(imgstr,cssstr);*/
-});
+  return merge(imgStream, cssStream);
+}));

gulp/tasks/1_cleanerTasks.js

@@ -3,16 +3,13 @@ var config = require('../config');
 var p = require('gulp-load-plugins')();
 var gulp = require('gulp');
 var del = require('del');
- // var cache = require('gulp-cache');
+
 
 
 
 gulp.task('clearCache', function(){
   return p.cache.clearAll();
 });
-
-
-
 gulp.task('del:build', function() {
   del.sync([config.clean.build.root]);
 });

gulp/tasks/2_watchTasks.js

@@ -2,30 +2,32 @@
 var config = require('../config');
 var runSequence = require('run-sequence');
 var gulp = require('gulp');
+var path = require('path');
 
 
 gulp.task('watch', ['startDev'] , function() {
 
-/*  ПРИ НЕОБХОДИМОСТИ МОЖНО ПРОСТО ЗАКОМЕНТИРОВАТЬ/РАССКОМЕНТИРОВАТЬ
- ТАСК,КОТОРЫЙ НЕ БУДЕТ/БУДЕТ ИСПОЛЬЗОВАТЬСЯ  */
+/*  При необходимости можно просто закоментировать/расскоментировать
+ таск,который не будет/будет использоваться  */
 
 
   // gulp.watch( config.images.watch.svgIcons, ['buildSvgSymbol']);
 
   gulp.watch( config.styles.watch,  ['sass']);
-
-  gulp.watch( config.html.watchTemplates )
-    .on('change', function () {
-
-      global.notUpdateHtmlTmplt = false;
-      gulp.start('html');
-      global.notUpdateHtmlTmplt = true;
-      console.log('htmlTmplt updated');
-    });
 
-  gulp.watch( config.html.watchPages )
+  gulp.watch( config.html.watch )
     .on('change', function(e){ 
-      rebuildFiles(e, 'updateHtml', 'html'); 
+
+      var str = path.dirname(e.path);
+      var res = str.split(path.sep);
+
+      if (res[res.length-1] === 'html_components') {
+        global.notUpdateNJKtemplates = false;
+        gulp.start('html');
+        global.notUpdateNJKtemplates = true;
+      }
+      else{ rebuildFiles(e, 'updateHtml', 'html'); }
+
     });
 
   gulp.watch( config.scripts.watch )
@@ -38,15 +40,14 @@ gulp.task('watch', ['startDev'] , function() {
       rebuildFiles(e, 'updateImg', 'img'); 
     });
 
-  /*gulp.watch( config.images.watch.pngIconsForSprite )
-    .on('change', function (e) {
-      rebuildFiles(e, 'updatePngSprite','buildPngSprite');
-    })
-
-  gulp.watch( config.fonts.watch )
-    .on('change', function(e){
-      rebuildFiles(e, 'updateFonts', 'convertFonts'); 
-    });*/
+  // gulp.watch( config.images.watch.pngIconsForSprite )
+  //   .on('change', function (e) {
+  //     rebuildFiles(e, 'updatePngSprite', 'buildPngSprite');
+  //   });
+  // gulp.watch( config.fonts.watch )
+  //   .on('change', function(e){
+  //     rebuildFiles(e, 'updateFonts', 'convertFonts'); 
+  //   });
 
 });
 
@@ -57,11 +58,38 @@ function rebuildFiles(event, specialTask, defaultTask) {
   else { gulp.start(defaultTask); }
 }
 
-/*  ПРИ НЕОБХОДИМОСТИ МОЖНО ПРОСТО ЗАКОМЕНТИРОВАТЬ ТАСК,КОТОРЫЙ НЕ БУДЕТ ИСПОЛЬЗОВАТЬСЯ  */
+/*  При необходимости можно просто закоментировать/расскоментировать
+ таск,который не будет/будет использоваться  */
+
+/* Настраивается после исследования макета */
 gulp.task('startDev',function (cb) {
-  runSequence('del:build','img', /*'buildPngSprite',*//*'buildSvgSymbol',*/ [/*'convertFonts',*/'sass', 'html', 'js'], 'webserver', cb)
+  runSequence(
+    'del:build',
+    'img', 
+    // 'buildPngSprite',
+    // 'buildSvgSymbol',
+    [
+      // 'convertFonts',
+      'sass', 
+      'html', 
+      'js'
+    ], 
+
+    'webserver', cb);
 });
 
 gulp.task('prod', function () {
-  runSequence('del:build', 'clearCache', 'img', /*'buildPngSprite',*//*'svgIconsToBuild',*/ [/*'buildSvgSymbol', 'convertFonts',*/'sass', 'html', 'js'] ); 
+  runSequence(
+    'del:build', 
+    'clearCache', 
+    'img', 
+    // 'buildPngSprite',
+    // 'svgIconsToBuild', // возможно не нужен
+     [
+       // 'buildSvgSymbol', 
+       // 'convertFonts',
+       'sass', 
+       'html', 
+       'js' 
+     ]); 
 });