R
R
Raul Abdullin2017-03-10 13:17:09
gulp.js
Raul Abdullin, 2017-03-10 13:17:09

Which js code is more literate for Gulp?

I am very green in this business, so perhaps the question may seem strange. In general, I master Gulp. I made a set for myself according to the video lesson, I got the following code (I'll paste it below). At the same time, a friend sent me his code, similar, but slightly different. I'll attach it too. The question is which of the codes is made more competently in terms of js laws, or I don’t even know what to call it. There are slight differences, he uses a different preprocessing Stylus, and I use Sass, and there is an autoprefixer in my code. Please ignore these differences.
1) My code for the lesson:

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) Friend code:
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 the question

In order to leave comments, you need to log in

3 answer(s)
S
Sergey delphinpro, 2017-03-10
@raulvodov

Definitely your code is more in line with "best practic".
The rest is the same. Are you confused by the use of a different syntax for browser-sync? Just read the doc and learn how to use it correctly.

I
iBird Rose, 2017-03-10
@iiiBird

what difference does it make how you connect and use plugins? the npm page has documentation and code on how to use it (for example, for sass https://www.npmjs.com/package/gulp-sass). take and use as you like.

E
Egor Zhivagin, 2017-03-10
@Krasnodar_etc

Still absolutely. Yours looks a little better

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question