@deployable/assets
v0.10.4
Published
Deployable web asset management
Downloads
8
Maintainers
Readme
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.
Install
npm install @deployable/assets --save-dev
npm install @deployable/asset --save
yarn add @deployable/assets --dev
yarn add @deployable/asset
Usage
Creating a gulp definition
gulpfile.js
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
group.task('runit')
.createShellTask(['bower install'])
// Copy files
group.task('copyit')
.addSrc('bower_components/somecss/dist/*.css')
.setDest('public/css')
.createCopyTask()
// Sass
group.task('buildit')
.addSrc('src/sass/*.scss')
.setDest('public/css')
.createSassTask()
// Custom task, still in a group
let task = group.task('custom')
task
.addSrc('src/sass/*.scss')
.setDest('public/css')
.createCustom(()=>{
gulp.src(task.src)
.pipe(whatever())
.pipe(dest(task.dest))
})
// 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/asset')({ prefix: 'https://cdn.com/3e4a6' })
assetHelpers.js('js/test.js') // => https://cdn.com/3e4a6/js/test.js
assetHelpers.css('css/test.css') // => https://cdn.com/3e4a6/css/test.css
assetHelpers.path('fonts/arial.webf') // => https://cdn.com/3e4a6/fonts/arial.webf
API
let glp = new Gulp()
let group = glp.addGroup('sitecss')
group.task('testTask')
.addSrc('bower_components/jquery/dist/*.js')
.setDest('public/js')
.addCopyTask()
About
deployable-assets is released under the MIT license.
Copyright 2016 Matt Hoyle - code aatt deployable.co
https://github.com/deployable/node-deployable-assets https://deployable.co/code/node-deployable-assets