JS/webseite-gulp-ts/frontend/gulpfile.js

// import gulp from 'gulp';
import { task, src, dest, watch, parallel, series } from 'gulp';

// Allgemeine Module für Gulp

import plumber from 'gulp-plumber';
import sourcemaps from 'gulp-sourcemaps';

// SERVER =================================
import bs from 'browser-sync';
const browserSync = bs.create();

// https://browsersync.io/docs/gulp
// $ gulp server
task('server', () => {
  browserSync.init({
    server: {
      baseDir: './',
    },
    // host: '127.0.0.1',
    // localhost: false,
    open: false,
    port: 3000,
  });
});

task('reload', (done) => {
  browserSync.reload(); // Refresh der Seite
  done();
});

// =================================

// CSS ==================================

import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoPrefixer from 'gulp-autoprefixer';

const sass = gulpSass(dartSass);

// $ gulp css
task('css', (done) => {
  // Updated path to look in dev/scss
  const sourceFile = './dev/scss/main.scss';
  const targetFolder = './assets/css';

  src(sourceFile, { allowEmpty: true, sourcemaps: true })
    .pipe(plumber()) // Falls ein Fehler entsteht, überspringe Fehlerabbruch
    .pipe(
      sass({
        outputStyle: 'expanded',
        sourceMap: false,
        debug: true,
        quietDeps: true, // Unix
        silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api', 'abs-percent'],
      }).on('error', sass.logError),
    )
    .pipe(autoPrefixer()) // fehlende prefixe im css werden gesetzt (-ms-, -o- -webkit-)
    .pipe(dest(targetFolder, { sourcemaps: '../map' }));

  done();
});

// ==================================

// JS bzw. TS ==================================

import rollupStream from '@rollup/stream';
import { babel } from '@rollup/plugin-babel'; // Plugin für rollup. JS Dateien werden über Babel direkt beim bundlen in "altes" JS über babel kompiliert
import { nodeResolve } from '@rollup/plugin-node-resolve'; // import Kurzschreibweise (suche Module im node_modules Ordner)
import commonJs from '@rollup/plugin-commonjs'; // commonjs module werden module (ES6) kompatibel gemacht
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import rollupReplace from '@rollup/plugin-replace'; // Umbenennung von Variablen in den Modulen möglich
import typescript from '@rollup/plugin-typescript'; // For TypeScript support needs "typescript" and "tslib"

// declare the cache variable outside of task scopes
let cache;

// $ gulp ts
task('ts', () => {
  // Updated path to look in dev/scripts for a main.ts file
  const sourceFile = './dev/scripts/main.ts';
  const targetFolder = './assets/js';

  return rollupStream({
    input: sourceFile,
    output: {
      format: 'iife',
      sourcemap: 'inline', // Enable inline sourcemap for gulp-sourcemaps
    },
    // define the cache in Rollup options
    cache,
    plugins: [
      typescript(), // Added TypeScript plugin
      rollupReplace({
        'process.env.NODE_ENV': JSON.stringify('development'),
        preventAssignment: true,
      }),
      nodeResolve(), // z.B. import _ from 'lodash' <- damit in "node_modules" nach Modul gesucht wird
      commonJs({
        include: 'node_modules/**',
      }), // wenn require - commonJS Schreibweise vorliegt, wird es umgeschrieben, so dass import statement verwendet werden kann
      babel({
        presets: ['@babel/preset-env'], // ES6+ in altes JS umgewandelt
        plugins: ['@babel/plugin-transform-runtime'], // kontrolliert, ob ein Modul bereits eingebunden und bindet es nicht erneut ein
        babelHelpers: 'runtime',
        compact: true,
        extensions: ['.js', '.ts'], // Tell babel to process TS files
      }),
    ],
  })
    .on('bundle', (bundle) => {
      // update the cache after every new bundle is created
      cache = bundle;
    })

    .pipe(source('build.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(
      sourcemaps.write('../map', {
        sourceRoot: '../dev/scripts',
      }),
    )
    .pipe(dest(targetFolder));
});

// HTML =================================
import fileInclude from 'gulp-file-include';
task('html', (done) => {
  const sourceFiles = ['./dev/html/pages/**/*.html', './dev/html/pages/*.html'];
  const targetFolder = './';

  src(sourceFiles)
    .pipe(plumber())
    .pipe(
      fileInclude({
        prefix: '@@',
        basepath: './dev/html/includes',
      }),
    )
    .pipe(dest(targetFolder));

  done();
});

// === Watcher ======================

task('watcher', () => {
  // Watcher for scss files in dev/scss
  watch(['./dev/scss/**/*.+(scss|css)', './dev/scss/*.+(scss|css)'], series('css', 'reload'));
  // Watcher for ts/js files in dev/scripts
  watch(['./dev/scripts/**/*.ts', './dev/scripts/*.ts'], series('ts', 'reload'));

  // Watcher for html files in dev/pages
  watch(
    [
      './dev/html/pages/**/*.html',
      './dev/html/pages/*.html',
      './dev/html/includes/**/*.html',
      './dev/html/includes/*.html',
    ],
    series('html', 'reload'),
  );
});

// ==== DEV MODE ====================
task('dev', series('css', 'ts', 'html', parallel('watcher', 'server')));

// ===================================
task('test', (done) => {
  console.log('Test task executed');
  done();
});

task('copy', (done) => {
  src('package.json')
    //.pipe(module())
    .pipe(dest('./docs'));

  console.log('Copy task executed');
  done();
});

// gulp.task('test', (done) => {
//   console.log('Test task executed');
//   done();
// });

// gulp.task('copy', (done) => {
//   gulp
//     .src('package.json')
//     //.pipe(module())
//     .pipe(gulp.dest('./docs'));

//   console.log('Copy task executed');
//   done();
// });