Наилучшей практики в отношении gulpfile


Я пытаюсь автоматизировать много вещей. Я ищу отзывы о мой первый gulpfile.js. Из того, что я пока узнал залпом довольно мощный, но я еще учусь.

Я ищу способы, чтобы улучшить мой текущий файл, существуют ли более эффективные способы делать то, что я так далеко?

  • Я особенно ищу помощь относительно моей задачей изображения и мое построение на/dev средах. В настоящее время, единственная разница между Dev и Build является тот факт, что Дэв выполняется синхронизация браузера и не сжимать мои снимки (я не хочу дойти до своего предела API или ждать долго строить). Является ли это правильным способом?

  • Другой моей проблемой является задача изображения. Tinypng принимаются только файлы PNG и JGPs поэтому я хочу, чтобы сжать их и просто скопировать не поддерживаемые форматы.
    Любая помощь приветствуется!

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


131
2
задан 15 марта 2018 в 08:03 Источник Поделиться
Комментарии