// main.js (manually edited)

import $ from 'jquery'

import A from '../components/component-A/A.js'
import B from '../components/component-B/B.js'
import C from '../components/component-C/C.js'
import D from '../components/component-D/D.js'

$(() => {
   A()
   B()
   C()
   D()
})

// main.js (manually edited)

import $ from 'jquery'

import autoImports from './auto-imports.js'

$(() => {
   autoImports()
})

// auto-imports.js (auto-generated)

import A from "../components/component-A/A.js";
import B from "../components/component-B/B.js";
import C from "../components/component-C/C.js";
import D from "../components/component-D/D.js";

export default function() {
  A();
  B();
  C();
  D();
})

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

// Preset SCSS gulp-auto-imports task
gulp.task('sass:load', function () {
   // Always relative to gulpfile.js even if this code is inside a folder
   var dest = 'source/scss'
   // Do not leave off the "return", it is vital!
   return (
      gulp
         .src('./source/components/**/*.scss')
         // Using the "scss" preset ("dest" must be provided here as well)
         .pipe(autoImports({ preset: 'scss', dest: dest }))
         .pipe(gulp.dest(dest))
   )
})

/************\
    Gulp 4
\************/

// Define a separate compile task
gulp.task('sass:compile', function () {
   return gulp
      .src('source/scss/main.scss')
      .pipe(sass())
      .pipe(gulp.dest('build/assets/css'))
})

// make "sass:load" run before "sass:compile" when "sass" is run
gulp.task('sass', gulp.series('sass:load', 'sass:compile'))

// Watch for changes
gulp.task('watch', function (done) {
   gulp.watch('source/**/*.scss', gulp.series('sass'))
   done()
})

/************\
    Gulp 3
\************/

// Make "sass" dependent on "sass:load"
gulp.task('sass', ['sass:load'], function () {
   return gulp
      .src('source/scss/main.scss')
      .pipe(sass())
      .pipe(gulp.dest('build/assets/css'))
})

// Watch for changes
gulp.task('watch', function () {
   gulp.watch('source/**/*.scss', ['sass'])
})

// scss preset default settings
{
  format: `@import '$path';`,
  fileName: 'auto-imports.scss',
  retainOrder: true,
  header: `
// This file is generated by gulp-auto-imports.
// Save this file into source control.
// You may rearrange the order of the imports however you like.
// You may NOT make any other alterations to this file.
`
};

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

// Create a function for generating auto-import gulp tasks
const createScssImporterTask = sourceFolder =>
   createAutoImportTask({
      sourceFolder,
      // [optional] default = *all files*; Restrict imports to only target files with a specific extension name
      fileExtension: 'scss',
      // [optional] use this to resolve task name conflicts
      taskPrefix: 'compile',
      // [optional] default = true; will ignore the generated import file
      ignoreImporterFile: true,
      // Same settings object that you apply to the main gulp task
      importerSettings: {
         preset: 'scss',
         // Note: `dest` will default to the source folder unless you define it here
         // The generated output file will be ignored
      },
   })

// Destructure into separate importer and watcher tasks
const [scssVarsImporter, scssVarsImportWatcher] = createScssImporterTask(
   './source/scss/config/vars'
)
const [scssMixinsImporter, scssMixinsImportWatcher] = createScssImporterTask(
   './source/scss/config/mixins'
)
const [scssComponentsImporter, scssComponentsImportWatcher] =
   createScssImporterTask('./source/scss/config/components')

// Gulp 4
gulp.task(
   'scss-auto-imports',
   gulp.parallel(
      scssVarsImporter,
      scssVarsImportWatcher,
      scssMixinsImporter,
      scssMixinsImportWatcher,
      scssComponentsImporter,
      scssComponentsImportWatcher
   )
)

// Gulp 3
gulp.task('scss-auto-imports', [
   scssVarsImporter,
   scssVarsImportWatcher,
   scssMixinsImporter,
   scssMixinsImportWatcher,
   scssComponentsImporter,
   scssComponentsImportWatcher,
])

/**
 * Use array destructuring as a shortcut
 */

// Gulp 4
gulp.task(
   'scss-auto-imports',
   gulp.parallel(
      ...createScssImporterTask('./source/scss/config/vars'),
      ...createScssImporterTask('./source/scss/config/mixins'),
      ...createScssImporterTask('./source/scss/config/mixins')
   )
)

// Gulp 3
gulp.task('scss-auto-imports', [
   ...createScssImporterTask('./source/scss/config/vars'),
   ...createScssImporterTask('./source/scss/config/mixins'),
   ...createScssImporterTask('./source/scss/config/mixins'),
])

/**
 * Avoid watching files by not passing the generated watcher task into your main gulp process
 */

// Destructure to extract only the build task
const [scssVarsImporter] = createScssImporterTask('./source/scss/config/vars')
const [scssMixinsImporter] = createScssImporterTask(
   './source/scss/config/mixins'
)
const [scssComponetsImporter] = createScssImporterTask(
   './source/scss/config/mixins'
)

// Gulp 4 (no watching of files)
gulp.task(
   'scss-auto-imports',
   gulp.parallel(scssVarsImporter, scssMixinsImporter, scssComponetsImporter)
)

// Gulp 3 (no watching of files)
gulp.task('scss-auto-imports', [
   scssVarsImporter,
   scssMixinsImporter,
   scssComponetsImporter,
])

const taskNames = createAutoImportTask({
   sourceFolder: './path/to/sourceFolder',
   fileExtension: 'fileExtension',
   taskPrefix: 'taskPrefix',
   importerSettings: {
      preset: 'scss',
   },
})

taskNames ===
   [
      'taskPrefix:fileExtension:auto-imports:sourceFolder',
      'taskPrefix:fileExtension:auto-imports-watcher:sourceFolder',
   ]

// Using Gulp Auto Imports in combination with Gulp Sass Glob in Gulp 3

var gulp = require('gulp')
var autoImports = require('gulp-auto-imports')
var sass = require('gulp-sass')
var sassGlob = require('gulp-sass-glob')

// Gulp Auto Imports task
gulp.task('sass:load', function () {
   var dest = 'source/scss'
   return gulp
      .src('./source/components/**/*.scss')
      .pipe(autoImports({ preset: 'scss', dest: dest }))
      .pipe(gulp.dest(dest))
})

// Sass compile task (depends on 'sass:load' task)
gulp.task('sass', ['sass:load'], function () {
   return gulp
      .src('source/scss/main.scss')
      .pipe(sassGlob()) // Sass Glob
      .pipe(sass())
      .pipe(gulp.dest('build/assets/css'))
})

// Using Gulp Auto Imports in combination with Gulp Sass Glob in Gulp 4

var gulp = require('gulp')
var autoImports = require('gulp-auto-imports')
var sass = require('gulp-sass')
var sassGlob = require('gulp-sass-glob')

// Gulp Auto Imports task
gulp.task('sass:load', function () {
   var dest = 'source/scss'
   return gulp
      .src('./source/components/**/*.scss')
      .pipe(autoImports({ preset: 'scss', dest: dest }))
      .pipe(gulp.dest(dest))
})

// Sass compile task
gulp.task('sass:compile', function () {
   return gulp
      .src('source/scss/main.scss')
      .pipe(sassGlob()) // Sass Glob
      .pipe(sass())
      .pipe(gulp.dest('build/assets/css'))
})

// Combined sass compile task
gulp.task('sass', gulp.series('sass:load', 'sass:compile'))

// Overriding the default preset setting for "fileName"
.pipe(autoImports({ preset: 'es6', fileName: 'different-file-name.js', dest: 'path/to/dest' }))

'use strict';

// Import the auto imports plugin
var autoImports = require('gulp-auto-imports');

var gulp = require('gulp');
var rollup = require('@rollup/stream');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task('js:load', function(){
  const dest = './source/js';
  return gulp.src([
    './source/components/**/*.js',
    // exclude files and folders starting with an underscore
    '!./source/components/{**/\_*,**/\_*/**}',
  ])
    // Run the auto imports
    .pipe(autoImports({ preset: 'es6', dest }))
    .pipe(gulp.dest(dest));
})

var cache;
gulp.task('js:compile', function() {
  return rollup({
      // point to the entry file.
      input: './source/js/main.js',

      // use cache for better performance
      cache: cache,

      // Note: these options are placed at the root level in older versions of Rollup
      output: {
        // Output bundle is intended for use in browsers
        // (iife = "Immediately Invoked Function Expression")
        format: 'iife',

        // Show source code when debugging in browser
        sourcemap: true
      }
    })
    .on('bundle', function(bundle) {
      // update cache data after every bundle is created
      cache = bundle;
    })
    // point to the entry file.
    .pipe(source('main.js', './source/js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('.'));

    .pipe(gulp.dest('./build/assets/js'));
});

gulp.task('js', gulp.series('js:load', 'js:compile'));

gulp.task('js:watch', function(done){
  gulp.watch(['./source/**/*.js'], gulp.series('js'));
  done();
})

gulp.task('start', gulp.series('js', 'js:watch'));

'use strict'

// Import the auto imports plugin
var autoImports = require('gulp-auto-imports')

var gulp = require('gulp')
var rollup = require('@rollup/stream')
var sourcemaps = require('gulp-sourcemaps')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')

gulp.task('js:load', function () {
   const dest = './source/js'
   return (
      gulp
         .src([
            './source/components/**/*.js',
            // exclude files and folders starting with an underscore
            '!./source/components/{**/_*,**/_*/**}',
         ])
         // Run the auto imports
         .pipe(autoImports({ preset: 'es6', dest }))
         .pipe(gulp.dest(dest))
   )
})

var cache
gulp.task('js', ['js:load'], function () {
   return (
      rollup({
         // point to the entry file.
         input: './source/js/main.js',

         // use cache for better performance
         cache: cache,

         // Note: these options are placed at the root level in older versions of Rollup
         output: {
            // Output bundle is intended for use in browsers
            // (iife = "Immediately Invoked Function Expression")
            format: 'iife',

            // Show source code when debugging in browser
            sourcemap: true,
         },
      })
         .on('bundle', function (bundle) {
            cache = bundle
         })
         // point to the entry file.
         .pipe(source('main.js', './source/js'))
         .pipe(buffer())
         .pipe(sourcemaps.init({ loadMaps: true }))
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest('./build/assets/js'))
   )
})

gulp.task('js:watch', function () {
   gulp.watch(['./source/**/*.js'], ['js'])
})

gulp.task('start', ['js', 'js:watch'])

'use strict'

// Import the auto imports plugin
var autoImports = require('gulp-auto-imports')

var watchify = require('watchify')
var browserify = require('browserify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var log = require('gulplog')
var sourcemaps = require('gulp-sourcemaps')

var customOpts = {
   // entry file defined here
   entries: ['./source/js/main.js'],
   debug: true,
}
var opts = Object.assign({}, watchify.args, customOpts)

// Watch for changes then bundle
var b = watchify(browserify(opts))

b.on('update', bundle) // on any dep update, runs the bundler
b.on('log', log.info) // output build logs to terminal

function bundle() {
   // Then bundle the code
   return b
      .bundle()
      .on('error', log.error.bind(log, 'Browserify Error'))
      .pipe(source('main.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./build/assets/js'))
}

// File loader Gulp task
gulp.task('js:load', function () {
   const dest = './source/js'
   return (
      gulp
         .src([
            './source/components/**/*.js',
            // exclude files and folders starting with an underscore
            '!./source/components/{**/_*,**/_*/**}',
         ])
         // Run the auto imports
         .pipe(autoImports({ preset: 'es5', dest }))
         .pipe(gulp.dest(dest))
   )
})

///////////////////////////
// Gulp 3 specific code //
/////////////////////////
gulp.task('js', ['js:load'], bundle) // so you can run `gulp js` to build the file
gulp.task('watch', function () {
   // Gulp 3 can't distinguish between 'add','unlink', and 'change' events
   // so it also has to run on file changes
   gulp.watch('./source/components/**/*.js', ['js:load'])
})

///////////////////////////
// Gulp 4 specific code //
/////////////////////////
gulp.task('js', gulp.series('js:load', bundle)) // so you can run `gulp js` to build the file
gulp.task('watch', function (done) {
   var watcher = gulp.watch('./source/components/**/*.js')
   //Gulp 4 has the advantage of only running when a file is added/removed, not changed
   watcher.on('add', gulp.series('js:load'))
   watcher.on('unlink', gulp.series('js:load'))
   done()
})

// Import auto-imports.js inside main.js
import autoImports from './auto-imports.js' // ES6
var autoImports = require('./auto-imports.js') // ES5

document.addEventListener('DOMContentLoaded', function () {
   // Run the auto-imports code on page load
   autoImports()
})

// component js file example

/////////
// ES6 //
/////////
export default function on_page_load() {
   // Place code here that you wish to run
   // when the `autoImports()` function is called
}

/////////
// ES5 //
/////////
module.exports = function on_page_load() {
   // Place code here that you wish to run
   // when the `autoImports()` function is called
}

// Typical SCSS gulp-auto-imports task

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

gulp.task('sass:load', function () {
   // Always relative to gulpfile.js even if this code is inside a folder
   var dest = 'source/scss'

   // Do not leave off the "return", it is vital!
   return gulp
      .src([
         // These paths are always relative to gulpfile.js
         './source/components/**/*.scss',
         // Ignore files & folders that start with underscores
         '!./source/{**/_*,**/_*/**}',
      ])
      .pipe(
         autoImports({
            // "$path" is replaced with a relative file path
            format: '@import "$path";',
            // destination folder (must match gulp.dest)
            dest: dest,
            // name of the output file
            fileName: 'auto-imports.scss',
            // Don't change the order that imports are currently in
            retainOrder: true,
            // Add a message to the top of the file
            header: '// output from gulp-auto-imports',
         })
      )
      .pipe(gulp.dest(dest))
})

// Typical JS gulp-auto-imports task

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

// Use an ES6 template literal for defining the template
// Node has supported them natively ever since v4.0.0
var template = `
$format[imports]

export default function(){
$format[functions]
}
`

gulp.task('js:load', function () {
   var dest = 'source/js'

   return gulp
      .src([
         './source/components/**/*.js',
         // Ignore files & folders that start with underscores
         '!./source/{**/_*,**/_*/**}',
      ])
      .pipe(
         autoImports({
            // Format is now split into an object holding named format strings
            format: {
               // "$name" is replaced with the name of the file
               // "$path" is replaced with a relative path to the file
               imports: 'import $name from "$path";',
               // The indent is added here, not in the template
               functions: '  $name();',
            },
            dest: dest,
            fileName: 'auto-imports.js',
            template: template,
         })
      )
      .pipe(gulp.dest(dest))
})

// Generated auto-imports.js file

import one from '../components/one/one.js'
import two from '../components/two/two.js'
import three from '../components/three/three.js'
import four from '../components/four/four.js'

export default function () {
   one()
   two()
   three()
   four()
}

// How NOT to indent your template

var template = `
$format[imports]

export default function(){
    // Notice the indent here
    $format[functions]
}
`

// The result of incorrect indentation

import one from '../components/one/one.js'
import two from '../components/two/two.js'
import three from '../components/three/three.js'
import four from '../components/four/four.js'

export default function () {
   // Notice the indent here
   one()
   two()
   three()
   four()
}

//How to apply correct indentation

var template = `
$format[imports]

export default function(){
    // Notice the indent here
$format[functions]
}
`;

// ... other Gulp code ...

.pipe(autoImports({
  format: {
    imports: 'import $name from "$path";',
    // The indent is added here, not in the template
    functions: '    $name();'
  },
  dest: dest,
  fileName: 'auto-imports.js',
  template: template
}))

// The result of correct indenting

import one from '../components/one/one.js'
import two from '../components/two/two.js'
import three from '../components/three/three.js'
import four from '../components/four/four.js'

export default function () {
   // Notice the indent here
   one()
   two()
   three()
   four()
}