gulp

---

1. Watch Tasks:

gulp.task('watch', () => {
  gulp.watch('src/**/*.js', ['lint', 'build']);
  gulp.watch('src/**/*.scss', ['styles']);
});

2. Build Tasks:

gulp.task('build', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

3. Style Tasks:

gulp.task('styles', () => {
  return gulp.src('src/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('dist/css'));
});

4. Unit Testing Tasks:

gulp.task('test', () => {
  return gulp.src('test/**/*.js')
    .pipe(mocha());
});

5. Code Coverage Tasks:

gulp.task('coverage', () => {
  return gulp.src('src/**/*.js')
    .pipe(istanbul())
    .pipe(istanbul.writeReports());
});

6. Prettify Tasks:

gulp.task('prettify', () => {
  return gulp.src('src/**/*.js')
    .pipe(prettier())
    .pipe(gulp.dest('src'));
});

7. Lint Tasks:

gulp.task('lint', () => {
  return gulp.src('src/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

8. Serve Tasks:

gulp.task('serve', () => {
  browserSync.init({
    server: {
      baseDir: 'public'
    }
  });
});

9. Watch and Reload Tasks:

gulp.task('watch-reload', () => {
  gulp.watch('src/**/*.html', browserSync.reload);
  gulp.watch('src/**/*.js', browserSync.reload);
});

10. Image Optimization Tasks:

gulp.task('images', () => {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

11. SVG Optimization Tasks:

gulp.task('svg', () => {
  return gulp.src('src/svg/*.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('dist/svg'));
});

12. Font Optimization Tasks:

gulp.task('fonts', () => {
  return gulp.src('src/fonts/*')
    .pipe(fonter())
    .pipe(gulp.dest('dist/fonts'));
});

13. Create ZIP Archives:

gulp.task('archive', () => {
  return gulp.src('dist/**/*')
    .pipe(zip('archive.zip'))
    .pipe(gulp.dest('archives'));
});

14. Clean Tasks:

gulp.task('clean', () => {
  return gulp.src('dist', { read: false })
    .pipe(clean());
});

15. Copy Assets Tasks:

gulp.task('copy', () => {
  return gulp.src(['src/assets/*', 'src/vendor/**/*'])
    .pipe(gulp.dest('dist/assets'));
});

16. Parse JSON Files:

const jsonfile = require('jsonfile');

gulp.task('parse-json', () => {
  jsonfile.readFile('data.json', (err, data) => {
    if (err) console.log(err);
    console.log(data);
  });
});

17. Generate Markdown Files:

const { readdir, readFile } = require('fs').promises;

gulp.task('generate-markdown', async () => {
  const files = await readdir('docs');
  for (const file of files) {
    const data = await readFile(`docs/${file}`, 'utf8');
    gulp.src(`docs/${file}`)
      .pipe(markdown())
      .pipe(gulp.dest('dist/docs'));
  }
});

18. Test with Mocha and Chai:

gulp.task('test-mocha', () => {
  return gulp.src('test/**/*.js')
    .pipe(mocha({ reporter: 'spec', ui: 'bdd' }))
    .pipe(chai.assert());
});

19. Build Web Components:

const { createElement, defineElement } = require('web-component');

gulp.task('build-web-components', () => {
  const componentName = 'my-component';
  const component = createElement(componentName);
  defineElement(componentName, component);
  return gulp.src('src/**/*.js')
    .pipe(webComponent())
    .pipe(gulp.dest('dist'));
});

20. Create a Single-Page Application:

const { connect, set } = require('gulp-connect');
const serveStatic = require('serve-static');

gulp.task('spa', () => {
  connect.server({
    root: 'public',
    port: 8080,
    middleware: () => [
      serveStatic('public')
    ]
  });
});

21. Preprocess Sass with PostCSS:

const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

gulp.task('postcss', () => {
  return gulp.src('src/**/*.scss')
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('dist/css'));
});

22. Optimize WebP Images:

const webp = require('gulp-webp');

gulp.task('webp', () => {
  return gulp.src('src/images/*')
    .pipe(webp())
    .pipe(gulp.dest('dist/images'));
});

23. Parse YAML Files:

const yaml = require('gulp-yaml');

gulp.task('parse-yaml', () => {
  return gulp.src('data.yaml')
    .pipe(yaml())
    .pipe(gulp.dest('dist/data'));
});

24. Convert SVG to PNG:

const svg2png = require('gulp-svg2png');

gulp.task('svg2png', () => {
  return gulp.src('src/svg/*.svg')
    .pipe(svg2png())
    .pipe(gulp.dest('dist/images'));
});

25. Create PDFs from HTML:

const { createReadStream } = require('fs');
const { pipeline } = require('stream');
const pdfkit = require('pdfkit');

gulp.task('pdf', () => {
  const readStream = createReadStream('src/template.html');
  const pdf = new pdfkit();
  pipeline(readStream, pdf, (err) => {
    if (err) console.log(err);
    pdf.pipe(gulp.dest('dist/output.pdf'));
  });
});