const { src, dest, watch, parallel, series } = require('gulp');
const scss = require("gulp-sass")(require("sass"));
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const del = require("del");
const { reload } = require('browser-sync');
const browserSync = require("browser-sync").create();
function browsersync(params) {
browserSync.init({
server:{
baseDiu:'app/'
},
notify:false
})
}
function styles() {
return src("app/scss/style.scss")
.pipe(scss({ outputStyle: "compressed" }))
.pipe(concat("style.min.css"))
.pipe(
autoprefixer({
overrideBrowserslist: ["last 10 versions"],
grid: true,
})
)
.pipe(dest("app/css"))
.pipe(browserSync.stream());
}
function scripts() {
return src([
"node_modules/jquery/dist/jquery.js",
"node_modules/slick-carousel/slick/slick.js",
"node_modules/@fancyapps/ui/dist/fancybox.umd.js",
"node_modules/rateyo/src/jquery.rateyo.js",
"app/js/main.js"
])
.pipe(concat("main.min.js"))
.pipe(uglify())
.pipe(dest("app/js"))
.pipe(browserSync.stream());
}
function images() {
return src("app/images/**/*.*")
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.mozjpeg({ quality: 75, progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
}),
])
)
.pipe(dest("dist/images"));
}
function build() {
return src([
'app/**/*.html',
'app/css/style.min.css',
'app/js/main.min.js',
], {base:'app'})
.pipe(dest('dist'))
}
function cleanDist(params) {
return del('dist')
}
function watching() {
watch(["app/scss/**/*.scss"], styles);
watch(['app/js/**/*.js','!app/js/main.js'], scripts);
watch(['*.html']).on('change',browserSync.reload);
}
exports.styles = styles;
exports.scripts = scripts;
exports.browsersync = browsersync;
exports.watching = watching;
exports.images = images;
exports.cleanDist = cleanDist;
exports.build = series(cleanDist, images, build);
exports.default = parallel(styles, scripts, browsersync, watching);
<script src = "app\js\main.min.js"></script>
<script src = "js/main.min.js"></script>
был изначально подключен <link rel="stylesheet" href="node_modules\slick-carousel\slick\slick.css">
<link rel="stylesheet" href="app/css/style.min.css" />
<title>Document</title>
<script src="node_modules/slick-carousel/slick/slick.min.js" ></script>
<script src = "js/main.min.js"></script>