Conflict fix

gulpfile.js

@@ -11,6 +11,7 @@ const autoprefixer = require("autoprefixer")
 const mqpacker = require("css-mqpacker")
 const cleanss = require('gulp-cleancss');
 
+const plumber = require('gulp-plumber');
 const notify = require('gulp-notify');
 const gulpIf = require('gulp-if');
 const debug = require('gulp-debug');
@@ -33,6 +34,7 @@ lists.css.forEach(function(blockPath) {
 });
 fs.writeFileSync('./src/scss/style.scss', styleImports);
 
+// Определим разработка это или финальная сборка
 // Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
 
@@ -59,16 +61,19 @@ gulp.task('style', function () {
   const sourcemaps = require('gulp-sourcemaps');
   console.log('---------- Компиляция стилей');
   return gulp.src(dirs.srcPath + 'scss/style.scss')
-    .pipe(gulpIf(isDev, sourcemaps.init()))
-    .pipe(debug({title: "Style:"}))
-    .pipe(sass())
-    .pipe(postcss(postCssPlugins))
-    .on('error', notify.onError(function(err){
-      return {
+    .pipe(plumber({
+      errorHandler: function(err) {
+        notify.onError({
           title: 'Styles compilation error',
           message: err.message
+        })(err);
+        this.emit('end');
       }
     }))
+    .pipe(gulpIf(isDev, sourcemaps.init()))
+    .pipe(debug({title: "Style:"}))
+    .pipe(sass())
+    .pipe(postcss(postCssPlugins))
     .pipe(gulpIf(!isDev, cleanss()))
     .pipe(rename('style.min.css'))
     .pipe(gulpIf(isDev, sourcemaps.write('/')))
@@ -78,7 +83,7 @@ gulp.task('style', function () {
       showTotal: false,
     }))
     .pipe(gulp.dest(dirs.buildPath + '/css'))
-    .pipe(browserSync.stream());
+    .pipe(browserSync.stream({match: '**/*.css'}));
 });
 
 // Копирование добавочных CSS, которые хочется иметь отдельными файлами
@@ -91,7 +96,8 @@ gulp.task('copy:css', function() {
       showFiles: true,
       showTotal: false,
     }))
-    .pipe(gulp.dest(dirs.buildPath + '/css'));
+    .pipe(gulp.dest(dirs.buildPath + '/css'))
+    .pipe(browserSync.stream());
 });
 
 // Копирование изображений
@@ -122,7 +128,7 @@ gulp.task('copy:js', function () {
 // Копирование шрифтов
 gulp.task('copy:fonts', function () {
   console.log('---------- Копирование шрифтов');
-  return gulp.src(dirs.source + '/fonts/*.{ttf,woff,woff2,eot,svg}')
+  return gulp.src(dirs.srcPath + '/fonts/*.{ttf,woff,woff2,eot,svg}')
     .pipe(newer(dirs.buildPath + '/fonts'))  // оставить в потоке только изменившиеся файлы
     .pipe(size({
       title: 'Размер',
@@ -133,6 +139,7 @@ gulp.task('copy:fonts', function () {
 });
 
 // Сборка SVG-спрайта для блока sprite-svg
+let spritePath = dirs.srcPath + dirs.blocksDirName + '/sprite-svg/svg/';
 gulp.task('sprite:svg', function (callback) {
   if((pjson.configProject.blocks['sprite-svg']) !== undefined) {
     const svgstore = require('gulp-svgstore');
@@ -196,14 +203,17 @@ gulp.task('js', function (callback) {
   if(lists.js.length > 0){
     console.log('---------- Обработка JS');
     return gulp.src(lists.js)
-      .pipe(concat('script.min.js'))
-      .pipe(gulpIf(!isDev, uglify()))
-      .on('error', notify.onError(function(err){
-        return {
-          title: 'Javascript uglify error',
+      .pipe(plumber({
+        errorHandler: function(err) {
+          notify.onError({
+            title: 'Javascript concat/uglify error',
             message: err.message
+          })(err);
+          this.emit('end');
         }
       }))
+      .pipe(concat('script.min.js'))
+      .pipe(gulpIf(!isDev, uglify()))
       .pipe(size({
         title: 'Размер',
         showFiles: true,
@@ -244,11 +254,22 @@ gulp.task('build', function (callback) {
   gulpSequence(
     'clean',
     'sprite:svg',
-    ['style', 'copy:css', 'copy:img', 'copy:js', 'copy:fonts'],
+    ['style', 'js', 'copy:css', 'copy:img', 'copy:js', 'copy:fonts'],
     'html',
     callback);
 });
 
+// Отправка в GH pages (ветку gh-pages репозитория)
+gulp.task('deploy', function() {
+  const ghPages = require('gulp-gh-pages');
+  console.log('---------- Публикация содержимого ./build/ на GH pages');
+  return gulp.src(dirs.buildPath + '**/*')
+    .pipe(ghPages());
+});
+
+// Задача по умолчанию
+gulp.task('default', ['serve']);
+
 // Локальный сервер, слежение
 gulp.task('serve', ['build'], function() {
   browserSync.init({
@@ -260,43 +281,44 @@ gulp.task('serve', ['build'], function() {
   gulp.watch([
     dirs.srcPath + dirs.blocksDirName + '/**/*.scss',
     dirs.srcPath + '/scss/**/*.scss',
-  ], function (event) {
-    gulpSequence('style')(function (err) {
-      if (err) console.log(err);
-    })
-  });
+  ], ['style']);
+  // Слежение за добавочными стилями
+  if(pjson.configProject.copiedCss.length) {
+    gulp.watch(pjson.configProject.copiedCss, ['copy:css']);
+  }
+  // Слежение за изображениями
+  if(lists.img.length) {
+    gulp.watch(lists.img, ['watch:img']);
+  }
+  // Слежение за добавочными JS
+  if(pjson.configProject.copiedJs.length) {
+    gulp.watch(pjson.configProject.copiedJs, ['watch:copied:js']);
+  }
+  // Слежение за шрифтами
+  gulp.watch(dirs.srcPath + '/fonts/*.{ttf,woff,woff2,eot,svg}', ['watch:fonts']);
+  // Слежение за SVG для спрайта
+  if(fileExist(spritePath) !== false) {
+    gulp.watch(spritePath + '*.svg', ['watch:svg:sprite']);
+  }
   // Слежение за html
   gulp.watch([
     dirs.srcPath + '/*.html',
     dirs.srcPath + '/_include/*.html',
     dirs.srcPath + dirs.blocksDirName + '/**/*.html',
-  ], function (event) {
-    gulpSequence('html', browserSync.reload())(function (err) {
-      if (err) console.log(err);
-    })
-  });
-  // Слежение за изображениями
-  if(lists.img) {
-    gulp.watch(lists.img, function (event) {
-      gulpSequence('copy:img', browserSync.reload())(function (err) {
-        if (err) console.log(err);
-      })
-    });
+  ], ['watch:html']);
+  // Слежение за JS
+  if(lists.js.length) {
+    gulp.watch(lists.js, ['watch:js']);
   }
 });
 
-// Отправка в GH pages (ветку gh-pages репозитория)
-// gulp.task('deploy', function() {
-//   console.log('---------- Публикация ./build/ на GH pages');
-//   console.log('---------- '+ ghPagesUrl);
-//   return gulp.src('./build/**/*')
-//     .pipe(ghPages());
-// });
-
-// Задача по умолчанию
-gulp.task('default',
-  gulpSequence(['serve'])
-);
+// Браузерсинк с 3-м галпом — такой браузерсинк...
+gulp.task('watch:img', ['copy:img'], reload);
+gulp.task('watch:copied:js', ['copy:js'], reload);
+gulp.task('watch:fonts', ['copy:fonts'], reload);
+gulp.task('watch:svg:sprite', ['sprite:svg'], reload);
+gulp.task('watch:html', ['html'], reload);
+gulp.task('watch:js', ['js'], reload);
 
 
 
@@ -359,3 +381,9 @@ function fileExist(path) {
     return !(err && err.code === 'ENOENT');
   }
 }
+
+// Перезагрузка браузера
+function reload (done) {
+  browserSync.reload();
+  done();
+}

package.json

@@ -56,10 +56,12 @@
     "gulp-concat": "^2.6.1",
     "gulp-debug": "^3.1.0",
     "gulp-file-include": "^1.0.0",
+    "gulp-gh-pages": "^0.5.4",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^3.1.1",
     "gulp-newer": "^1.3.0",
     "gulp-notify": "^3.0.0",
+    "gulp-plumber": "^1.1.0",
     "gulp-postcss": "^6.3.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",

src/index.html

@@ -14,6 +14,8 @@
 
   <p><img src="img/joker.jpg" alt="" width="824" height="460"></p>
 
+  <input type="text" value ="qwerty">
+
   @@include('_include/page_bottom.html')
 </body>
 </html>