Полный цикл в digital

Обединение отдельных тасков в 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);
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг