const gulp = require('gulp') // gulp plugins const eslint = require('gulp-eslint') const htmllint = require('gulp-html-linter') const htmlmin = require('gulp-htmlmin') const lesshint = require('gulp-lesshint') const less = require('gulp-less') const minifyCSS = require('gulp-csso') const minify = require('gulp-minify') // htmllint dependencies const fancyLog = require('fancy-log') const colors = require('ansi-colors') // for hot reloading const browserSync = require('browser-sync').create() // custom reporter functions function htmllintReporter(filepath, issues) { issues.forEach((issue) => fancyLog(colors.cyan('[gulp-htmllint] ') + colors.white(filepath + ' [' + issue.line + ',' + issue.column + ']: ') + colors.red('(' + issue.code + ') ' + issue.msg)) ) } gulp.task('html', () => gulp.src('src/index.html') .pipe(htmllint()) .pipe(htmllint.format()) .pipe(htmlmin({ 'collapseWhitespace': true, 'removeComments': true })) .pipe(gulp.dest('build')) ) gulp.task('css', () => gulp.src('src/less/*.less') .pipe(lesshint()) .pipe(lesshint.reporter()) .pipe(less()) .pipe(minifyCSS()) .pipe(gulp.dest('build/css')) ) gulp.task('js', () => gulp.src('src/js/*.js') .pipe(eslint()) .pipe(eslint.format()) .pipe(minify({ ext:{ src:'.js', min:'.min.js' } })) .pipe(gulp.dest('build/js')) ) gulp.task('default', [ 'html', 'css', 'js' ]) /* DEVELOPMENT */ gulp.task('browsersync', ['default'], () => browserSync.init({ server: "./build" }) ) gulp.task('html-watch', ['html'], function (done) { browserSync.reload() done() }) gulp.task('css-watch', ['css'], function (done) { browserSync.reload() done() }) gulp.task('js-watch', ['js'], function (done) { browserSync.reload() done() }) gulp.task('watch', ['browsersync'], function(){ gulp.watch('src/index.html', ['html-watch']) gulp.watch('src/less/*.less', ['css-watch']) gulp.watch('src/js/*.js', ['js-watch']) })