v3.2.0 - Typescript presets & createAutoImportTask function

New Typescript Presets

Adds 3 new preset options that are designed for Typescript:

• "ts" = import fileName from '../relative/path/fileName'
• "ts_default_exports" = export { default as fileName } from '../relative/path/fileName'
• "ts_named_exports" = export { fileName } from '../relative/path/fileName'

New placeholder type

The new $noExtPath placeholder allows you to write clean import path names

New createAutoImportTask function

Before (v3.1.x)

var gulp = require('gulp')
var autoImports = require('gulp-auto-imports')

const createScssImporterTask = sourceFolder => {
  const loadTask = `sass:${sourceFolder}:load-imports`
  const watchTask = `sass:${sourceFolder}:watch-imports`

  gulp.task(loadTask, function () {
    return (
      gulp
        .src(`${sourceFolder}/**/*.scss`)
        .pipe(autoImports({ preset: 'scss', dest: sourceFolder }))
        .pipe(gulp.dest(sourceFolder))
    )
  })

  gulp.task(watchTask, function (done) {
    const watcher = gulp.watch(`${sourceFolder}/**/*.scss`)

    watcher.on('add', gulp.series(taskName))
    watcher.on('unlink', gulp.series(taskName))

    done()
  })

  return [ loadTask, watchTask ]
}

const [scssVarsImporter, scssVarsImportWatcher] = createScssImporterTask(
   './source/scss/config/vars'
)
const [scssMixinsImporter, scssMixinsImportWatcher] = createScssImporterTask(
   './source/scss/config/mixins'
)

gulp.task(
   'scss-auto-imports',
   gulp.parallel(
      scssVarsImporter,
      scssVarsImportWatcher,
      scssMixinsImporter,
      scssMixinsImportWatcher,
   )
)

After (v3.2.x)

var gulp = require('gulp')
var { createAutoImportTask } = require('gulp-auto-imports')

const createScssImporterTask = sourceFolder =>
   createAutoImportTask({
      sourceFolder,
      fileExtension: 'scss',
      importerSettings: {
         preset: 'scss',
      },
   })

const [scssVarsImporter, scssVarsImportWatcher] = createScssImporterTask(
   './source/scss/config/vars'
)
const [scssMixinsImporter, scssMixinsImportWatcher] = createScssImporterTask(
   './source/scss/config/mixins'
)

gulp.task(
   'scss-auto-imports',
   gulp.parallel(
      scssVarsImporter,
      scssVarsImportWatcher,
      scssMixinsImporter,
      scssMixinsImportWatcher,
   )
)

Note: the old method still works perfectly fine, v3.2.x just introduces an easier way to implement this common pattern.