D
D
Dmitry Shvedov2016-07-08 14:33:48
gulp.js
Dmitry Shvedov, 2016-07-08 14:33:48

Browsersync does not work with this assembly, what should I do?

package.json

{
  "name": "test",
  "dependencies": {
    "gulp": "^3.9.1",
    "browser-sync": "^2.13.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-clean-css": "^2.0.11",
    "gulp-imagemin": "^3.0.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rigger": "^0.5.8",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.4",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.8",
    "rimraf": "^2.5.3"
  }
}

gulpfile.js
'use strict';

var gulp          = require('gulp'),                 // Основной плагин gulp
  watch         = require('gulp-watch'),           // Расширение возможностей watch
  prefixer      = require('gulp-autoprefixer'),    // Расставление автопрефиксов
  uglify        = require('gulp-uglify'),          // Минификация js
  sass          = require('gulp-sass'),            // Препроцессор SASS
  sourcemaps    = require('gulp-sourcemaps'),      // Генерация CSS для отладки кода
  rigger        = require('gulp-rigger'),          // Работа с инклюдами
  cssmin        = require('gulp-clean-css'),       // Минификация CSS
  imagemin      = require('gulp-imagemin'),        // Минификация изображений
  rimraf        = require('rimraf'),               // Очистка
    plumber       = require('gulp-plumber'),         // Пропуск ошибок
    webserver     = require('browser-sync'),         // Поднимаем сервер
  reload        = webserver.reload;                // Делаем авторелоад

var path = {
    build: {
    // Пути куда складывать собранные файлы
        html:     'build/',
        js:       'build/js/',
        css:      'build/css/',
        img:      'build/img/',
        fonts:    'build/fonts/'
    },
    src: {
    // Пути откуда брать исходники
        html:     'src/*.html',                 // Берем все файлы .html из папки src
        js:       'src/js/main.js',             // Берем главный js файл
        style:    'src/scss/main.scss',         // Берем главный scss файл
        img:      'src/img/**/*.*',             // Берем все изображения, всех форматов, из всех внутренних папок
        fonts:    'src/fonts/**/*.*'            // Берем все шрифты из всех внутренних папок
    },
    watch: {
    // Указываем, за изменением каких файлов мы хотим наблюдать
        html:     'src/**/*.html',
        js:       'src/js/**/*.js',
        style:    'src/scss/**/*.scss',
        img:      'src/img/**/*.*',
        fonts:    'src/fonts/**/*.*'
    },
    clean: './build'
};

// Конфиг для сервера
var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Front-End"
};

// Подчищаем build
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

// Собираем html
gulp.task('html:build', function () {
    gulp.src(path.src.html)                   // Выберем файлы по нужному пути
        .pipe(plumber())                      // Пропускаем ошибки
        .pipe(rigger())                       // Прогоним через rigger
        .pipe(gulp.dest(path.build.html))     // Выплюнем их в папку build
        .pipe(reload({stream: true}));        // И перезагрузим наш сервер для обновлений
});

// Собираем JS
gulp.task('js:build', function () {
    gulp.src(path.src.js)                     // Найдем наш main файл
        .pipe(plumber())                      // Пропускаем ошибки
        .pipe(rigger())                       // Прогоним через rigger
        .pipe(sourcemaps.init())              // Инициализируем sourcemap
        .pipe(uglify())                       // Сожмем наш js
        .pipe(sourcemaps.write())             // Пропишем карты
        .pipe(gulp.dest(path.build.js))       // Выплюнем готовый файл в build
        .pipe(reload({stream: true}));        // И перезагрузим сервер
});

// Собираем SCSS
gulp.task('style:build', function () {
    gulp.src(path.src.style)                  // Выберем наш main.scss
        .pipe(plumber())                      // Пропускаем ошибки
        .pipe(sourcemaps.init())              // Инициализируем sourcemap
        .pipe(sass())                         // Скомпилируем
        .pipe(prefixer())                     // Добавим вендорные префиксы
        .pipe(cssmin())                       // Сожмем
        .pipe(sourcemaps.write())             // Пропишем карты
        .pipe(gulp.dest(path.build.css))      // Поместим в build
        .pipe(reload({stream: true}));        // И перезагрузим сервер
});

// Собираем изображения
gulp.task('image:build', function () {
    gulp.src(path.src.img)                            //Выберем наши картинки
        .pipe(imagemin({                              //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img))               // Поместим в build
        .pipe(reload({stream: true}));                 // И перезагрузим сервер
});

// Собираем шрифты
gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)                           //Выберем наши шрифты
        .pipe(gulp.dest(path.build.fonts))             // И перезагрузим сервер
});

// Определяем build который все будет запускать
gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
]);

// При изменении файлов запускает нужную задачу
gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

// Подключаем сервер
gulp.task('webserver', function () {
    webserver(config);
});

// Запуск всей сборки
gulp.task('default', ['build', 'webserver', 'watch']);

cmd
[14:23:51] Using gulpfile ~\Desktop\Test-7\gulpfile.js
[14:23:51] Starting 'html:build'...
[14:23:51] Finished 'html:build' after 11 ms
[14:23:51] Starting 'js:build'...
[14:23:51] Finished 'js:build' after 8.03 ms
[14:23:51] Starting 'style:build'...
[14:23:51] Finished 'style:build' after 8.96 ms
[14:23:51] Starting 'fonts:build'...
[14:23:51] Finished 'fonts:build' after 1.65 ms
[14:23:51] Starting 'image:build'...
[14:23:51] Finished 'image:build' after 3.25 ms
[14:23:51] Starting 'build'...
[14:23:51] Finished 'build' after 14 μs
[14:23:51] Starting 'webserver'...
[14:23:52] Finished 'webserver' after 69 ms
[14:23:52] Starting 'watch'...
[14:23:52] Finished 'watch' after 13 ms
[14:23:52] Starting 'default'...
[14:23:52] Finished 'default' after 11 μs
[14:23:52] gulp-imagemin: Minified 1 image (saved 41.14 kB - 4.6%)
[Front-End] Access URLs:
 ----------------------------------------------
       Local: http://localhost:9000
    External: http://192.168.0.104:9000
      Tunnel: https://ihbpgnlvlp.localtunnel.me
 ----------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.104:3001
 ----------------------------------------------
[Front-End] Serving files from: ./build
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd ENOENT
    at exports._errnoException (util.js:873:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
    at onErrorNT (internal/child_process.js:344:16)
    at nextTickCallbackWith2Args (node.js:442:9)
    at process._tickCallback (node.js:356:17)

If you disable 'webserver' in the launch task, then everything works. This is a standard build and should work. Something she lacks on this computer. What to do?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dmitry Shvedov, 2016-07-11
@DimaShved

The problem is solved, it was in the Vend itself. After upgrading from win7 to win10, I noticed problems with many programs, in my case there was a problem with node.js and the path to global files. Where in the path instead of "Administrator", it was "Administrator.000". This is not the main reason in my opinion, the main problem was in the firewall, it blocked node.js, although it was added to the exceptions, even with the firewall turned off. As a result, I decided to humanly reinstall win10 along with all the programs, and set it up properly. In the end, everything works. These are the miracles, I hope this helps those who had a similar situation after upgrading from win7 to win10. Good luck to all!

B
BigKompot, 2016-07-11
@BigKompot

Why (event, cb)or just (cb)after function?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question