Gulp новичка: сервер и релоад — как правильно?

Question

[Дмитрий Христоев]

Всем привет! Осваиваю gulp, возник вопрос сервера и livereload, поэтому есть несколько вопросов:
- gulp-connect или gulp-webserver - в уроках от loftblog используют connect, но уроки от сентября 2014, где-то недавно читал, что сейчас более актуально использовать webserver. Что правильно?
- в уроках от DevTips используют browser-sync но я реально не могу его поставить, поставил Python + Visual Studio Community 2015, но при установке npm install --save-dev browser-sync выдает ошибку (в атаче)


Что правильно, gulp-connect - gulp-webserver или все-таки пытаться бороть browser-sync ? Заранее спасибо

Answer 1

[Сергей delphinpro]

поставил Python + Visual Studio Community 2015, но при установке npm install --save-dev browser-sync выдает ошибку

Странно. Никогда не ставил ни питон, ни студию. Браузер-синк нормально ставится.

Comments

[Дмитрий Христоев]

если не ставить Питон, то появляется ошибка по Питону

[Дмитрий Христоев]

и да, возможно вы правы, забил на ошибки, прописал browser-sync и все работает

[Дмитрий Христоев]

можно еще задать пару вопросов
- что бы не заливать в репозиторий папку node_modules надо создать файл .gitignore ?
- что бы не отваливался терминал при какой-либо ошибке компиляции gulp можно что-то сделать? что бы не перезапускать gulp

[Сергей delphinpro]

1. да. добавить в гитигнор
2. нужно назначать обработчики ошибок, или просто использовать gulp-plumber, который сам навесит заглушек.

Answer 2

[Дмитрий Христоев]

все сделал, вроде работает, но, например у меня вылазит ошибка при сохранении файла (прикреплен) о том, что file to import not found or unreadeble, надо нажать несколько раз ctrl+s, gulpgile.js в атаче, может я что-то неправильно настроил?

"use script"

var gulp = require('gulp'),
  browserSync = require('browser-sync'),
  sass = require('gulp-sass'),
  uncss = require('gulp-uncss'),
  autoprefixer = require('gulp-autoprefixer'),
  sourcemaps = require('gulp-sourcemaps'),
  rename = require("gulp-rename"),
  minifyCss  = require('gulp-minify-css'),
  plumber = require('gulp-plumber'),
  jade = require('gulp-jade'),
  browserSync = require('browser-sync');

var plugins = require("gulp-load-plugins")();

// Static server
gulp.task('browser-sync', ['sass', 'html', 'js'], function() {
    browserSync.init({
      server: {
          baseDir: "./"
      },
      notify: false
    });
});

// jade
gulp.task('jade', function() {
  gulp.src('assets/template/*.jade')
    .pipe(plumber())
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./'));
})

gulp.task('sass', function() {
  gulp.src('assets/css/main.sass')
    .pipe(plumber())
    .pipe(plugins.sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    // .pipe(uncss({
    //    html: ['*.html']
    // }))
    .pipe(plugins.sourcemaps.write("./"))
    // .pipe(minifyCss({compatibility: 'ie8'}))
    // .pipe(rename("main.min.css"))    
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('html', function(){
  gulp.src('./*.html')
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('js', function(){
  gulp.src('assets/**/*.js')
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('watch', function () {
  gulp.watch('assets/css/**/*.sass', ['sass']);
  gulp.watch('./*.html', ['html']);
  gulp.watch('assets/template/**/*.jade', ['jade']);
  gulp.watch('assets/**/*.js', ['js']);
});

gulp.task('default', ['browser-sync', 'watch']);