Gulp-prismic-mpa-builder NPM

gulp-prismic-mpa-builder

An end-to-end Gulp build system and asset pipeline for a webapp templated by Metalsmith and content-managed by Prismic.io. Generates the following Gulp tasks for you:

clean - Cleans the built files.
views - Generates Metalsmith templates.
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.
sitemap - Creates sitemap.xml from all generated HTML files, based on gulp-sitemap.
serve - Serves the app with browser-sync.
default - Executes the above tasks in sequence.

Usage

import gulp from 'gulp-prismic-mpa-builder';

gulp.init({
  src: 'app',
  dest: 'public',
  scripts: {
    entry: {
      application: './application.js'
    }
  },
  views: {
    i18n: {
      default: 'en',
      locales: ['en', 'fr'],
      directory: 'config/locales'
    },
    metadata: {
      _: require('lodash'),
      moment: require('moment')
    }
  },
  sitemap: undefined
});

$ 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.apiEndpoint`

Type: string<br> Default:process.env.PRISMIC_API_ENDPOINT`

Endpoint of Prismic API.

`options.accessToken`

Type: string<br> Default:process.env.PRISMIC_ACCESS_TOKEN`

Access token of your Prismic account.

`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.views`

Type: Object Default:

{
  src: 'views'
}

Options for metalsmith.js.

`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.sitemap`

Type: Object Default: undefined

Options for sitemap task based on gulp-sitemap.

`options.clean`

Type: Array Default:

[
  `${options.dest}`,
  `${options.base}/views/.prismic`
]

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 || 8080,
  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.