Обединение отдельных тасков в gulpfile.js
Структура проекта:
- Папка
gulp
-
Папка
app
-
Папка
css
- Файл
app.min.css
готовые стили
- Файл
-
Папка
images
- Папка
dest
назначение для оптимизированных картинок - Папка
src
источник картинок
- Папка
-
Папка
js
- Файл
app.js
исходники скриптов - Файл
app.min.js
готовые скрипты
- Файл
-
Папка
less
- Файл
style.less
исходники чтилей .less
- Файл
-
Папка
sass
- Файл
style.sass
исходники чтилей .sass
- Файл
-
Папка
scss
- Файл
style.scss
исходники чтилей .scss
- Файл
-
Папка
- Папка
node_modules
модули для Gulp - Файл
gulpfile.js
основные настройки Gulp - Файл
package-lock.json
описание сборки NPM с фиксацией версий модулей - Файл
gulpfile.js
основные настройки Gulp
В результате у нас получился такой gulpfile.js
, который мы создали на реальном примере простого окружения для верстки:
gulpfile.js// определяем переменную "preprocessor"
let preprocessor = "sass";
// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем Browsersync
const browserSync = require("browser-sync").create();
// подключаем gulp-concat
const concat = require("gulp-concat");
// подключаем gulp-uglify-es
const uglify = require("gulp-uglify-es").default;
// подключаем модули gulp-sass и gulp-less
const sass = require("gulp-sass")(require("sass"));
const less = require("gulp-less");
// подключаем Autoprefixer
const autoprefixer = require("gulp-autoprefixer");
// подключаем модуль gulp-clean-css
const cleancss = require("gulp-clean-css");
// подключаем compress-images для работы с изображениями
const imagecomp = require("compress-images");
// подключаем модуль gulp-clean (вместо del)
const clean = require("gulp-clean");
// определяем логику работы Browsersync
function browsersync() {
// инициализация Browsersync
browserSync.init({
// указываем папку сервера
server: { baseDir: "app/" },
// отключаем уведомления
notify: false,
// отвечает за режим работы: true (подключение к интернет) или false (без подключения интернет)
online: true,
});
}
// определяем логику обработки скриптов
function scripts() {
// берем файлы из источников
return (
src([
// пример подключения библиотеки
"node_modules/jquery/dist/jquery.min.js",
// пользовательские скрипты, использующие библиотеку, должны быть подключены в конце
"app/js/app.js",
])
// конкатенируем в один файл
.pipe(concat("app.min.js"))
// сжимаем JavaScript
.pipe(uglify())
// выгружаем готовый файл в папку назначения
.pipe(dest("app/js/"))
// триггерим Browsersync для обновления страницы
.pipe(browserSync.stream())
);
}
// определяем логику обработки стилей
function styles() {
return (
// выбираем источник: "app/sass/style.sass" или "app/less/style.less" или "app/scss/style.scss"
src("app/" + preprocessor + "/style." + preprocessor + "")
// преобразуем значение переменной "preprocessor" в функцию
.pipe(eval(preprocessor)())
// конкатенируем в файл app.min.js
.pipe(concat("app.min.css"))
// создадим префиксы с помощью Autoprefixer
.pipe(autoprefixer({ overrideBrowserslist: ["last 10 versions"], grid: true }))
// минифицируем стили
.pipe(cleancss({ level: { 1: { specialComments: 0 } } /* , format: 'beautify' */ }))
// выгрузим результат в папку "app/css/"
.pipe(dest("app/css/"))
// сделаем инъекцию в браузер
.pipe(browserSync.stream())
);
}
// определяем логику обработки картинок
async function images() {
imagecomp(
// берём все изображения из папки источника
"app/images/src/**/*",
// выгружаем оптимизированные изображения в папку назначения
"app/images/dest/",
// настраиваем основные параметры
{ compress_force: false, statistic: true, autoupdate: true },
false,
// сжимаем и оптимизируем изображеня
{ jpg: { engine: "mozjpeg", command: ["-quality", "75"] } },
{ png: { engine: "pngquant", command: ["--quality=75-100", "-o"] } },
{ svg: { engine: "svgo", command: "--multipass" } },
{ gif: { engine: "gifsicle", command: ["--colors", "64", "--use-col=web"] } },
// обновляем страницу по завершению
function (err, completed) {
if (completed === true) {
browserSync.reload();
}
}
);
}
// определяем логику удаления файлов
function cleanimg() {
// удаляем папку "app/images/dest/"
return src("app/images/dest/", { allowEmpty: true }).pipe(clean());
}
// определяем логику удаления файлов
function buildcopy() {
// выбираем нужные файлы
return (
src(
["app/css/**/*.min.css", "app/js/**/*.min.js", "app/images/dest/**/*", "app/**/*.html"],
// параметр "base" сохраняет структуру проекта при копировании
{ base: "app" }
)
// выгружаем в папку с финальной сборкой
.pipe(dest("dist"))
);
}
// определяем логику удаления файлов
function cleandist() {
// удаляем папку "dist/"
return src("dist", { allowEmpty: true }).pipe(clean());
}
// автозапуск
function startwatch() {
// выбираем все файлы JS в проекте, а затем исключим с суффиксом .min.js
watch(["app/**/*.js", "!app/**/*.min.js"], scripts);
// мониторим файлы препроцессора на изменения
watch("app/**/" + preprocessor + "/**/*", styles);
// мониторим файлы HTML на изменения
watch("app/**/*.html").on("change", browserSync.reload);
// мониторим папку-источник изображений и выполняем images(), если есть изменения
watch("app/images/src/**/*", images);
}
// экспортируем функцию browsersync() в таск browsersync, значение после знака = это имеющаяся функция
exports.browsersync = browsersync;
// экспортируем функцию scripts() в таск scripts, значение после знака = это имеющаяся функция
exports.scripts = scripts;
// экспортируем функцию styles() в таск styles, значение после знака = это имеющаяся функция
exports.styles = styles;
// экспорт функции images() в таск images, значение после знака = это имеющаяся функция
exports.images = images;
// экспортируем функцию cleanimg() в таск cleanimg, значение после знака = это имеющаяся функция
exports.cleanimg = cleanimg;
// создаем новый таск "build", который последовательно выполняет нужные операции
exports.build = series(cleandist, styles, scripts, images, buildcopy);
// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(styles, scripts, browsersync, startwatch);