gulpfile.js

'use strict';

// imports
const gulp = require('gulp');
const htmlbeautify = require('gulp-html-beautify');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const bs = require('browser-sync').create(); // create a browser sync instance.
const eslint = require('gulp-eslint');

// paths
const htmlSources = './*.html';
const cssSources = 'assets/styles/*.less';

gulp.task('browser-sync', function() {
  bs.init({
    server: {
      baseDir: './',
    },
  });
});

gulp.task('less', function () {
  return gulp.src(cssSources)
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
    }))
    .pipe(gulp.dest('assets/styles'));
});

gulp.task('htmlbeautify', function() {
  gulp.src('./*.html')
    .pipe(htmlbeautify({ indentSize: 2 }))
    .pipe(gulp.dest('./'));
});

gulp.task('lint', function () {
  return gulp.src(['js/**/*.js'])
  .pipe(eslint())
  .pipe(eslint.format())
  .pipe(eslint.failOnError());
});

gulp.task('watch', function() {
  gulp.watch(cssSources, ['less']).on('change', bs.reload);
  gulp.watch(htmlSources, ['htmlbeautify']).on('change', bs.reload);
  gulp.watch('js/**/*.js', ['lint']);
});

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