Как еще можно улучшить данную сборку?

Question

[UnexpectedMan]

Сразу оговорюсь, я новичок в Gulp. Правильно ли указывать конкретно для одного файла автообновление. Дело в том, что , если я указываю автообновление для всех файлов с расширением .js , функция scripts выполняется бесконечно, от чего страница постоянно перезагружается. Поэтому и указал конкретно для одного файла. Как можно улучшить данную сборку?

var gulp = require("gulp"),
	sass = require("gulp-sass"),
	autoprefixer = require("gulp-autoprefixer"),
	cleanCSS = require("gulp-clean-css"),
	browserSync = require("browser-sync"),
	uglify = require("gulp-uglify"),
	concat = require("gulp-concat"),
	rename = require("gulp-rename")


function styles(){
	return gulp.src("./app/**/*.scss")
		.pipe(sass.sync({ outputStyle: "comprossed" }).on("error", sass.logError))
		.pipe(autoprefixer({
			browsers: [" last 2 version "],
			cascade: false
		}))
		.pipe(rename({
			suffix: ".min"
		}))
		.pipe(cleanCSS({
			compatibility: "ie8",
			level: 2
		}))
		.pipe(gulp.dest("./app/css"))
		.pipe(browserSync.reload({stream: true}))
}

function scripts(){
	return gulp.src([
		"node_modules/slick-carousel/slick/slick.js"
	])
	.pipe(concat("libs.min.js"))
	.pipe(uglify({
		toplevel: true
	}))
	.pipe(gulp.dest("app/js"))
	.pipe(browserSync.reload({stream: true}))
}

function watch(){
	browserSync.init({
		server: {
			baseDir: "./app"
		}
	})
	gulp.watch("app/**/*.scss", gulp.parallel("styles"))
	gulp.watch("app/js/main.js", gulp.parallel("scripts"))
	gulp.watch("app/*.html").on('change', browserSync.reload);
}

gulp.task("styles", styles)
gulp.task("scripts", scripts)
gulp.task("watch", watch);

Answer 1

[Андрей]

Вот хорошая сборка

Answer 2

[Александр Викторович]

var { src, dest, watch, series, parallel } = require('gulp'),
    del = require('del'),
    gulpif = require('gulp-if'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    browserSync = require('browser-sync').create(),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    /* Environment Variables */
    isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
    isSourcemaps = isDevelopment ? true : false;

function clear() {
    return del('./build/');
}

function html() {
    return src('./app/**/*.html')
        .pipe(dest('./build/'));
}

function styles() {
    return src('./app/scss/**/*.scss', {
            sourcemaps: isSourcemaps,
        })
        .pipe(sass.sync({
            outputStyle: 'comprossed'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: [' last 2 version '],
            cascade: false,
        }))
        .pipe(rename({
            suffix: '.min',
        }))
        .pipe(gulpif(!isDevelopment, cleanCSS({
            compatibility: 'ie8',
            level: 2,
        })))
        .pipe(dest('./build/css/', {
            sourcemaps: isSourcemaps
        }));
}

function scripts() {
    return src(['node_modules/slick-carousel/slick/slick.js'], {
            sourcemaps: isSourcemaps,
        })
        .pipe(concat('libs.min.js'))
        .pipe(gulpif(!isDevelopment, uglify({
            toplevel: true,
        })))
        .pipe(dest('./build/js/', {
            sourcemaps: isSourcemaps
        }));
}

function server() {
    browserSync.init({
        browserSync: {
            server: {
                baseDir: './build/',
            },
            port: 3004,
            open: true,
            notify: true,
            browser: 'default',
        },
    });
    browserSync.watch('./build/**/*.*').on('change', browserSync.reload);
}

function watch() {
    watch('./app/scss/**/*.scss', series('styles'));
    watch('./app/js/**/*.js', series('scripts'));
    watch('./app/**/*.html', series('html'));
}

exports.server = server;
exports.clear = clear;
exports.html = html;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;

exports.default = series(html, styles, scripts);

exports.dev = series(clear, exports.default, parallel(watch, server));

exports.build = series(clear, exports.default);

Установите del и gulp-if

Запуск gulp dev - режим разработки или gulp build - запуск без сервера и с минификацией css и js.

В таск html добавьте какой нибудь шаблонизатор по вкусу