# gulp

***

**1. Watch Tasks:**

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

**2. Build Tasks:**

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

**3. Style Tasks:**

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

**4. Unit Testing Tasks:**

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

**5. Code Coverage Tasks:**

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

**6. Prettify Tasks:**

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

**7. Lint Tasks:**

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

**8. Serve Tasks:**

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

**9. Watch and Reload Tasks:**

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

**10. Image Optimization Tasks:**

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

**11. SVG Optimization Tasks:**

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

**12. Font Optimization Tasks:**

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

**13. Create ZIP Archives:**

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

**14. Clean Tasks:**

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

**15. Copy Assets Tasks:**

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

**16. Parse JSON Files:**

```javascript
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:**

```javascript
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:**

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

**19. Build Web Components:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

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

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

**23. Parse YAML Files:**

```javascript
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:**

```javascript
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:**

```javascript
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'));
  });
});
```