Require assistance in configuring a suitable environment for Gulp, Pug, and integrating plugins such as GSAP

[aditya305]

Setting up a Gulp Project with Pug and GSAP

Require assistance in configuring a suitable environment for Gulp, Pug, and integrating plugins such as GSAP.

Current Situation

At present, I'm in the process of establishing a Gulp project. I aim to incorporate the GSAP library, which requires the creation of a specific Gulp task. Instead of using import gsap from "/dist/js/animation-plugin/gsap/gsap.min"; I want setup code where I can use the direct path of the gsap import gsap from "gsap", I must set up a task in the package.json. Assistance in this matter would be greatly appreciated

Here is my gulfile.js code

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");
const pug = require("gulp-pug");
const rename = require("gulp-rename");
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config.js");
const connect = require("gulp-connect");
const browserSync = require("browser-sync").create();
const shell = require("gulp-shell");



// Define paths
const paths = {
  src: {
    styles: "src/styles/**/*.scss",
    scripts: ["src/js/**/*.js", "!src/js/**/node_modules/**"],
    pug: "src/pug/**/*.pug",
    fonts: "src/assets/fonts/**/*",
    favicons: "src/assets/favicons/**/*",
    additionalAssets: [
      "src/assets/**/*.png",
      "src/assets/**/*.jpg",
      "src/assets/**/*.jpeg",
      "src/assets/**/*.svg",
    ],
    gsap: "node_modules/gsap/dist/**/*",
    smoothScrollbar: "node_modules/smooth-scrollbar/dist/smooth-scrollbar.js",
    packageJson: "package.json",
  },
  dest: {
    css: "dist/styles",
    js: "dist/js",
    html: "dist",
    fonts: "dist/fonts",
    favicons: "dist",
    additionalAssets: "dist/assets",
    gsap: "dist/js/animation-plugin/gsap",
    smoothScrollbar: "dist/js/animation-plugin/smoothScrollbar",
  },
};

// Copy font files task
gulp.task("copyFonts", function () {
  return gulp.src(paths.src.fonts).pipe(gulp.dest(paths.dest.fonts));
});

// Copy favicon files task
gulp.task("copyFavicons", function () {
  return gulp.src(paths.src.favicons).pipe(gulp.dest(paths.dest.favicons));
});

// Copy additional asset folders task
gulp.task("copyAssets", function () {
  return gulp
    .src(paths.src.additionalAssets)
    .pipe(gulp.dest(paths.dest.additionalAssets));
});

// Copy GSAP files task
gulp.task("copyGSAP", function () {
  return gulp.src(paths.src.gsap).pipe(gulp.dest(paths.dest.gsap));
});

// Copy SmoothScrollbar files task
gulp.task("copySmoothScrollbar", function () {
  return gulp
    .src(paths.src.smoothScrollbar)
    .pipe(gulp.dest(paths.dest.smoothScrollbar));
});

// Copy package.json to dist task
gulp.task("copyPackageJson", function () {
  return gulp.src(paths.src.packageJson).pipe(gulp.dest(paths.dest.html));
});

// Compile Sass task
gulp.task("sass", function () {
  return gulp
    .src(paths.src.styles)
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest(paths.dest.css))
    .pipe(browserSync.stream());
});

// Bundle JS task
gulp.task("js", function () {
  return gulp
    .src(["src/js/**/*.js", "!src/js/**/node_modules/**"]) // Exclude the node_modules directory
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest("dist/js"))
    .pipe(browserSync.stream());
});

// Minify pug task
gulp.task("pug", function () {
  return gulp
    .src(paths.src.pug)
    .pipe(pug())
    .pipe(gulp.dest(paths.dest.html))
    .pipe(browserSync.stream());
});

// Serve task
gulp.task("serve", function () {
  connect.server({
    root: "dist",
    livereload: true,
    middleware: function () {
      return [
        function (req, res, next) {
          if (req.url.endsWith(".css")) {
            res.setHeader("Content-Type", "text/css");
          }
          next();
        },
      ];
    },
  });

  browserSync.init({
    proxy: "localhost:8080",
    open: true,
    serveStatic: ["."],
  });

  gulp.watch(paths.src.styles, gulp.series("sass"));
  gulp.watch(paths.src.scripts, gulp.series("js"));
  gulp.watch(paths.src.pug, gulp.series("pug"));
});

// Deploy to Firebase task
gulp.task("deploy-firebase", shell.task(["firebase deploy"]));

// Build task
gulp.task(
  "build",
  gulp.series(
    "copyFonts",
    "copyFavicons",
    "copyAssets",
    "copyGSAP",
    "copySmoothScrollbar",
    "copyPackageJson",
    gulp.parallel("sass", "js", "pug")
  )
);

// Default task
gulp.task("default", gulp.series("build", "serve"));

and here is webpack.config.js

const path = require("path");
const glob = require("glob");
const fs = require("fs");

// Get a list of all installed packages from package.json
const packageJson = fs.readFileSync("./package.json");
const packageData = JSON.parse(packageJson);
const installedPackages = Object.keys(packageData.dependencies);

// Generate aliases based on installed packages
const aliases = {};
installedPackages.forEach((packageName) => {
  aliases[packageName] = path.resolve(__dirname, `node_modules/${packageName}`);
});

module.exports = {
  mode: "production", // Set the mode to 'production' or 'development' as needed
  entry: {
    ...getEntryPoints(),
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist/js/animation-plugin"), // Adjust the output path as needed
  },
  resolve: {
    extensions: [".js"],
    modules: [path.resolve(__dirname, "src/js"), "node_modules"],
    alias: {
      ...aliases,
      gsap: path.resolve(__dirname, "node_modules/gsap/dist/gsap.min.js"),
      "smooth-scrollbar": "smooth-scrollbar/dist/smooth-scrollbar.js",
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

function getEntryPoints() {
  const entryPoints = {};
  const files = glob.sync("src/js/**/*.js");

  files.forEach((file) => {
    const entryName = file.replace("src/js/", "").replace(".js", "");
    entryPoints[entryName] = path.resolve(__dirname, file);
  });

  return entryPoints;
}

[aditya305]

Discovered the solution: we employ GSAP directly rather than setting up a separate Gulp task for it.