Gulp-sys-assets NPM

gulp-sys-assets

An end-to-end Gulp build system for assets. Generates the following Gulp tasks for you:

clean - Cleans the built files.
images - Processes images.
videos - Processes videos.
fonts - Processes fonts.
documents - Processes documents.
extras - Processes other miscellaneous files such as robots.txt and sitemap.xml.
scripts - Bundles JavaScripts.
styles, - Compiles Sass stylesheets.
rev - Revisions asset files by appending content hash to filenames and auto replaces old paths with fingerprinted paths in affected files.
serve - Serves the app with browser-sync.
default - Executes the above tasks in sequence.

Usage

import gulp from 'gulp-sys-assets';

gulp.init({
  src: 'app',
  dest: 'public',
  scripts: {
    entry: {
      application: './application.js'
    }
  }
});

$ gulp

API

`init(options[, extendsDefaults])`

`options`

Type: Object

Options that define the behavior of this task. This object is parsed by config() in task-helpers.js, so you can target specific NODE_ENV environments.

`options.base` (required)

Type: string Default: undefined

Fallback base path for all the subtasks if one does not exist in their individual configs.

`options.dest` (required)

Type: string Default: undefined

Fallback destination path for all the subtasks if one does not exist in their individual configs.

`options.watch`

Type: Object Default:

{
  tasks: [browserSync.reload]
}

Fallback watch config for all the subtasks if one does not exist in their individual configs. See the README of any of the sub packages to see what a watch config looks like.

`options.images`

Type: Object Default:

{
  base: `${options.base}`,
  src: `images/**/*`,
  dest: `${options.dest}/assets`,
  watch: {
    files: Emitted files
    tasks: Current task name
  },
  envs: {
    development: {
      imagemin: false
    }
  }
}

Options for images task (see images.js).

`options.videos`

Type: Object Default:

{
  base: `${options.base}`,
  src: `videos/**/*`,
  dest: `${options.dest}/assets`
}

Options for videos task (see videos.js).

`options.fonts`

Type: Object Default:

{
  base: `${options.base}`,
  src: `fonts/**/*`,
  dest: `${options.dest}/assets`
}

Options for fonts task (see fonts.js).

`options.documents`

Type: Object Default:

{
  base: `${options.base}`,
  src: `documents/**/*`,
  dest: `${options.dest}/assets`
}

Options for documents task (see documents.js).

`options.extras`

Type: Object Default:

{
  base: `${options.base}`,
  src: `*`,
  dest: `${options.dest}`
}

Options for extras task (see extras.js).

`options.scripts`

Type: Object Default:

{
  context: `${options.base}/javascripts`,
  output: {
    path: `${config.dest}/assets/javascripts`,
    publicPath: 'assets/javascripts'
  }
}

Options for scripts task from scripts.js.

`options.styles`

Type: Object Default:

{
  src: 'stylesheets/*',
  dest: `${options.dest}/assets`,
  sass: {
    includePaths: [`${options.base}/stylesheets`]
  },
  watch: {
    files: `${options.base}/stylesheets/**/*`
  },
  envs: {
    production: {
      purify: `${options.dest}/**/*`
    }
  }
}

Options for styles task from styles.js.

`options.rev`

Type: Object Default:

{
  envs: {
    production: {
      src: `${options.dest}`
    }
  }
}

Options for rev task from rev.js.

`options.clean`

Type: Array Default:

[
  `${options.dest}`
]

Path(s) to delete during the clean task.

`options.serve`

Type: Object Default:

{
  server: {
    baseDir: `${options.dest}`,
  },
  files: false,
  notify: false,
  port: process.env.PORT || 3000,
  logLevel: 'info',
  open: false
}

Options for browser-sync. To serve the app include the --serve or --s flag when executing the default task.

`extendsDefaults`

Type: boolean Default: true

Maps to useConcat param in config() of task-helpers.js.

Watching for Changes

You can pass a --watch or --w flag to the Gulp command to enable file watching, like so:

$ gulp --watch

By default, files that were emitted as source files will be marked for watching and the task name assigned to associated subtasks will be executed whenever a file changes. To override this behavior use the global options.watch or the individual options.watch for each subtask.

Serving the App

You can pass a --serve or --s flag to the Gulp command to serve the app. When used in conjuction with the --watch flag, upon every file change browserSync.reload will be called.