Сборка на Gulp 4 для вёрстки
- Вёрстка
- |
- |
- Дата: 12 октября 2020
Небольшая, но удобная сборка для вёрстки. Возможности:
- Минификация (сжатие) CSS и JS;
- Конвертация SCSS в CSS;
- Hot Reload Server (автоматическая перезагрузка страницы при каких-либо изменениях);
- Объединение JS и CSS файлов в один;
- Autoprefixer (автоматически ставит вендорные префиксы в CSS файлах);
- Удаление ненужных файлов и папок;
P.S. В данной статье не рассказывается о принципах работы Gulp 4, приведён лишь код, если вы знаете, зачем это нужно, то пользуйтесь:
let gulp = require("gulp"),
sass = require("gulp-sass"),
browserSync = require("browser-sync"),
uglify = require("gulp-uglify"),
concat = require("gulp-concat"),
rename = require("gulp-rename"),
del = require("del"),
autoprefixer = require("gulp-autoprefixer");
gulp.task("clean", async function() {
del.sync("dist");
});
gulp.task("scss", function() {
return gulp
.src("app/scss/**/*.scss")
.pipe(sass({ outputStyle: "compressed" }))
.pipe(
autoprefixer({
overrideBrowserslist: ["last 10 versions"]
})
)
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("app/css"))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task("html", function() {
return gulp.src("app/*.html").pipe(browserSync.reload({ stream: true }));
});
gulp.task("script", function() {
return gulp.src("app/js/*.js").pipe(browserSync.reload({ stream: true }));
});
gulp.task("js", function() {
return gulp
.src([
"node_modules/slick-carousel/slick/slick.js"
])
.pipe(concat("libs.min.js"))
.pipe(uglify())
.pipe(gulp.dest("app/js"))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task("css", function() {
return gulp
.src([
"node_modules/normalize.css/normalize.css",
"node_modules/slick-carousel/slick/slick.css"
])
.pipe(concat("_libs.scss"))
.pipe(gulp.dest("app/scss"))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task("browser-sync", function() {
browserSync.init({
server: {
baseDir: "app/"
}
});
});
gulp.task("export", async function() {
let buildHtml = gulp.src("app/**/*.html").pipe(gulp.dest("dist"));
let buildCss = gulp.src("app/css/**/*.css").pipe(gulp.dest("dist/css"));
let buildJs = gulp.src("app/js/**/*.js").pipe(gulp.dest("dist/js"));
let buildFonts = gulp.src("app/fonts/**/*.*").pipe(gulp.dest("dist/fonts"));
let buildImg = gulp.src("app/img/**/*.*").pipe(gulp.dest("dist/img"));
});
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", gulp.parallel("scss"));
gulp.watch("app/*html", gulp.parallel("html"));
gulp.watch("app/js/*.js", gulp.parallel("script"));
});
gulp.task("build", gulp.series("export", "clean"));
gulp.task(
"default",
gulp.parallel("css", "scss", "js", "browser-sync", "watch")
);