2
\$\begingroup\$

I have been trying to automate a lot of stuff lately. I am looking for feedback about my first gulpfile.js. From what I learned so far gulp is quite powerful but I'm still learning.

I am looking for ways to improve my current file, are there better ways to do what I have so far?

  • I am especially looking for help concerning my image task and my build/dev environments. Currently, the only difference between dev and build is the fact that dev runs browser sync and does not compress my images (I don't want to reach my API limit or wait for the long build time). Is this the right way?

  • My other concern is the image task. Tinypng only accepts PNGs and JGPs so I want to compress them and just copy the not supported formats.
    Any help is welcome!

GulpFile:

import del from 'del'
import gulp from 'gulp'
import htmlmin from 'gulp-htmlmin'
import tinypng from 'gulp-tinypng'
import browserSync from 'browser-sync'
import merge from 'merge-stream'

const server = browserSync.create()

const reload = done => {
  server.reload()
  done()
}

const serve = done => {
  server.init({ server: '_dist' })
  done()
}

const paths = {
  html: {
    base: './_src',
    dest: '_dist',
    src: '_src/**/*.html'
  },
  styles: {
    dest: '_dist',
    src: '_src/**/*.html'
  },
  scripts: {
    dest: '_dist/',
    src: '_src/**/*.html'
  },
  images: {
    base: '_src/assets/images',
    dest: '_dist/assets/images',
    src: '_src/assets/images/**/*',
    srcNonOptimizable: [
      '_src/assets/images/**/*',
      '!_src/assets/images/**/*.{jpg,jpeg,png}'
    ],
    srcTinypng: '_src/assets/images/**/*.{jpg,jpeg,png}'
  },
  fonts: {
    dest: '_dist/assets/fonts',
    src: '_src/assets/fonts/*'
  }
}

export const clean = () => del(['_dist'])

export const html = () => {
  return gulp
    .src(paths.html.src, { base: paths.html.base, since: gulp.lastRun(html) })
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest(paths.html.dest))
}

export const styles = () => {
  console.log('Coming soon...')
}

export const scripts = () => {
  console.log('Coming soon...')
}

export const images = () => {
  const optimizeImages = gulp
    .src(paths.images.srcTinypng, { base: paths.images.base })
    .pipe(tinypng('api-key'))
    .pipe(gulp.dest(paths.images.dest))
  const copyImages = gulp
    .src(paths.images.srcNonOptimizable, { base: paths.images.base })
    .pipe(gulp.dest(paths.images.dest))
  return merge(optimizeImages, copyImages)
}

export const copyImages = () => {
  return gulp
    .src(paths.images.src, {
      base: paths.images.base,
      since: gulp.lastRun(copyImages)
    })
    .pipe(gulp.dest(paths.images.dest))
}

export const copyFonts = () => {
  return gulp
    .src(paths.fonts.src, { since: gulp.lastRun(copyFonts) })
    .pipe(gulp.dest(paths.fonts.dest))
}

export const watch = () => {
  gulp.watch(paths.html.src, gulp.series(html, reload))
  gulp.watch(paths.styles.src, gulp.series(styles, reload))
  gulp.watch(paths.scripts.src, gulp.series(scripts, reload))
  gulp.watch(paths.images.src, gulp.series(copyImages, reload))
  gulp.watch(paths.fonts.src, gulp.series(copyFonts, reload))
}

const dev = gulp.series(
  clean,
  gulp.parallel(html, copyImages, copyFonts),
  serve,
  watch
)
const build = gulp.series(clean, gulp.parallel(html, images, copyFonts))

gulp.task('dev', dev)
gulp.task('build', build)
export default dev
\$\endgroup\$
2
  • \$\begingroup\$ Can you elaborate on what exactly you're trying to achieve? Currently it's not very precise and your description seems redundant. \$\endgroup\$
    – yuri
    Mar 15 '18 at 20:58
  • \$\begingroup\$ @yuri my end goal is to build a gulpfile that will automatically optimize my entire code base. However, I want to achieve this as modular as possible while keeping everything in a single file for now. Like I said I have some concerns, especially about best practices and scalability. \$\endgroup\$ Mar 15 '18 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.