Какой js код более грамотный для Gulp?

Question

[Raul Abdullin]

Я в этом деле очень зеленый, поэтому возможно вопрос может показаться странным. Вообщем осваиваю Gulp. Делал под себя набор по видеоуроку, получился следующий код (вставлю ниже). При этом знакомый скинул мне свой код, похожий, но немного другой. Тоже прикреплю его. Вопрос в том, какой из кодов сделан более грамотно с точки зрения законов js или даже не знаю как это назвать. Есть небольшие различия, он использует другой препроцессов Стилус, а я Sass, а так же в моем коде имеется автопрефиксер. На эти различия просьба не обращать внимание.

1) Мой код по уроку:

var gulp         = require('gulp'),
		sass         = require('gulp-sass'),
		browserSync  = require('browser-sync'),
		autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
	return gulp.src('app/sass/**/*.sass')
		.pipe(sass())
		.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
		.pipe(gulp.dest('app/css/'))
		.pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function() {
	browserSync({
		server: {
			baseDir: 'app'
		},
		notify: false
	})
});

gulp.task('watch', ['browser-sync', 'sass'], function () {
	gulp.watch('app/sass/**/*.sass', ['sass']);
	gulp.watch('app/**/*.html', browserSync.reload);
	gulp.watch('app/js/**/*.js', browserSync.reload);
});

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

2) Код товарища:

var gulp = require('gulp'),
stylus = require('gulp-stylus'),
browserSync = require('browser-sync').create();

gulp.task('styles', function () {
return gulp.src('css/*.styl')
.pipe(stylus())
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream());
});

gulp.task('watch', ['styles'], function () {

browserSync.init({
open: true,
server: {
baseDir: "./"
},
notify: true
});

gulp.watch('css/**/*.styl', ['styles']);
gulp.watch('js/*.js').on('change', browserSync.reload);
gulp.watch('*.html').on('change', browserSync.reload);

});

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

Answer 1

[Сергей delphinpro]

Определенно, ваш код больше соответствует "best practic".

1. У вас есть вотчер, у товарища его нет. Какой у него тогда смысл запускать браузер-синк? =))
   
2. У товарища нет дефолтной задачи.
   
3. При этом товарищ более правильно использует браузер-синк browserSync = require('browser-sync').create(); - через создание объекта. Хотя на практике я разницы не вижу и сам использую простой реквайр без криэйт.
   
4. У обоих есть косяк - отсутствует обработка ошибок. Если в sass/stylus файле будет синтаксическая ошибка всё упадет и нужно будет перезапускать.
   
5. Ну у вас оформлено поаккуратнее еще ))
   

В остальном - одинаково. Вас наверное смущает использование другого синтаксиса для browser-sync? Просто почитайте доку и узнайте как правильно использовать.

Comments

[Raul Abdullin]

Спасибо большое за подробный ответ, я по невнимательности неполностью его код вставил, посмотрите пожалуйста теперь. Я просто перфекционист, был бы очень благодарен, как решить вопрос с обработкой ошибок?

[Raul Abdullin]

Вот его код, почему-то с ошибкам в текст темы вставляется неполностью.

2) Код товарища:

var gulp = require('gulp'),
stylus = require('gulp-stylus'),
browserSync = require('browser-sync').create();

gulp.task('styles', function () {
return gulp.src('css/*.styl')
.pipe(stylus())
.pipe(gulp.dest('css/'))
.pipe(browserSync.stream());
});

gulp.task('watch', ['styles'], function () {

browserSync.init({
open: true,
server: {
baseDir: "./"
},
notify: true
});

gulp.watch('css/**/*.styl', ['styles']);
gulp.watch('js/*.js').on('change', browserSync.reload);
gulp.watch('*.html').on('change', browserSync.reload);

});

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

[Сергей delphinpro]

raulvodov: ну теперь отличий принципиальных нет.

Для отлова ошибок проще всего использовать модуль gulp-plumber
Просто пайпите его самым первым в таске, остальное он сам сделает

var plumber = require('gulp-plumber');

gulp.task('styles', function () {
  return gulp.src('css/*.styl')
    .pipe(plumber())
    .pipe(stylus())
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.stream());
});

[Raul Abdullin]

т.е. вот этот ваш код take.ms/65T4m вставить сюда take.ms/xw4AV перед таском c sass и соответсвенно var plumber = require('gulp-plumber'); прописать во всеми required так?

[Сергей delphinpro]

raulvodov: да

[Сергей delphinpro]

gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
    .pipe(plumber()) // обработка ошибок. И так в каждом таске, где надо отловить ошибки
    .pipe(sass())
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({stream: true}))
});

[Raul Abdullin]

Сергей: ок, спасибо большое, а вот вы еще написали "При этом товарищ более правильно использует браузер-синк browserSync = require('browser-sync').create(); - через создание объекта. Хотя на практике я разницы не вижу и сам использую простой реквайр без криэйт. " в моем случае, что стоит поменять, чтобы сделать более правильное использование? или всю структуру целиком надо будет менять?

[Сергей delphinpro]

raulvodov: Посмотрите здесь https://browsersync.io/docs/gulp
отличия в
var browserSync = require('browser-sync').create();
и
browserSync.init({});
может еще что..
Я старый апи использую. пока работает и ладно

[Raul Abdullin]

Сергей: в очередной раз большое спасибо, буду разбираться

Answer 2

[iBird Rose]

какая разница как ты подключаешь и используешь плагины? на странице npm есть документация и код как его юзать (к примеру для sass https://www.npmjs.com/package/gulp-sass). берешь и юзаешь как тебе будет удобно.

Answer 3

[Егор Живагин]

Всё равно абсолютно. Твой выглядит чуть привычнее