node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Deployable Assets

Web Asset Builder.

Built on gulp. Supports babel, webpack, sass and shell commands out of the box.

Organises your gulp tasks into groups of tasks, groupname:taskname

Group destination can filter down to tasks if you don't override it.

Group sources filter up so you can access all group sources programatically.

A :watch task can be added to groups, or tasks. This will monitor the src files and build as needed.

Async sequences can be applied to a group to run sub tasks in order.


npm install deployable-assets --save-dev

yarn add deployable-assets --dev


Creating a gulp definition


Note: Adding the type of gulp task must always be the last step of a task chain. This step builds a gulp task from the previously set varaibles.

const { Gulp } = require('deployable-assets')
const { gulp } = Gulp
let gulp_def = new Gulp()
let group = gulp_def.addGroup('sitecss')
// Run a command 
  .createShellTask(['bower install'])
// Copy files 
// Sass 
// Custom task, still in a group 
let task = group.task('custom')
// Add a group task so `gulp sitecss` works 
group.sequence('sitecss:runit', ['sitecss:copyit', 'sitecss:buildit'], 'sitecss:custom')

Running gulp tasks

This builds the tasks group sitecss. Tasks copyit and buildit will be attached to a group. The tasks are available to run as sitecss:copyit and sitecss:buildit in gulp.

gulp sitecss:copyit

The parent sitecss task will automatically run all tasks in the group asynchronously.

gulp sitecss

Asynchronouse Sequence control

You can control the sequence of events with .sequence()

group.sequence( 'copyit', 'buildit', 'otherthing' )
group.sequence( 'copyit', [ 'buildit', 'otherthing' ] )

Deployable Gulp

The package provides the Deployable Assets gulp setup as a class which includes jquery, bootstrap, bootstrap-sass, babel and the pre defined tasks to build sources into assets.

const { DeployableGulp } = require('deployable-assets')
let gulp_def = new DeployableGulp()

The following tasks are provided

gulp bower        # bower + copy
gulp js           # babel
gulp js:babel
gulp css          # sass
gulp css:sass     # sass
gulp assets       # bower + js + css
gulp assets:watch # long running wathcing build

Asset Helpers

The deployable-asset package provides helper functionsto use in your application to refernce assets. All references to your asset paths should be replaced by the helper so assets can be served from any location, including the possibiilty of moving them to a CDN.

const assetHelpers  = require('deployable-assets')({ prefix: '' })
assetHelpers.js('js/test.js') // => 
assetHelpers.css('css/test.css') // => 
assetHelpers.path('fonts/arial.webf') // => 


let glp = new Gulp()

let group = glp.addGroup('sitecss')



deployable-assets is released under the MIT license.

Copyright 2016 Matt Hoyle - code aatt