Adds a webapp workflow to parched
npm install parched-tasks-webappparched-tasks-webapp
====================
Uses features from Parched and
browserify for pain free development times.
Bower is also supported, though not given the exact same treatement asapp/ or vendor/.
You do have to structure your app a certain way:
``
app/
├── assets/
├── scripts/
├── styles/
└── views/
vendor/
├── assets/
├── scripts/
├── styles/
└── views/
However, given this:
`bash`
npm install --save gulp parched parched-tasks-webappOkay now we will install some plugins
npm install --save parched-coffee \
parched-jade \
parched-minify-css \
parched-sass \
parched-svg2png \
parched-uglify \
parched-webfont
... and a Gulpfile.js containing:
`javascript
Parched.setup({
gulp: gulp,
parchedWillBuild: function(done) {
console.log('Before');
done();
},
parchedDidBuild: function(done) {
console.log('After');
done();
}
});
`
... you have a process that will:
- Support bower dependencies.
- Support coffeescript (in vendor/scripts/ and browserify).app/views/
- Support jade (in , vendor/views/ and browserify).app/styles/
- Support sass (in and vendor/styles/).before
- Support ordering of any concat'd files via and after properties.app/assets/glyphs/
- Build a webfont based on .svg files in .app/assets/sprites/
- Build both a retina and non-retina spritemap based on .svg files in .
- Minify javascript in production.
- Minify css in production.
- Error hard in production.
- Use browserSync in development.
- Stay out of your way.
- Allow you to intervene at pretty much any point.
Usage
-----
To cleanup public/ and tmp/:
`bash`
gulp parched-clean
To watch files in development
`bash`
gulp parched-watch
To build everything:
`bash`
gulp parched-build
To build and minify everything:
`bash`
NODE_ENV=production gulp parched-build
Bundles
-------
parched-tasks-webapp has a concept of "bundles". Directories of files
are considered to be a "bundle", provided there is some configuration.
The default bundle is app, and its configuration looks like:
`javascript`
Parched.setup({
webapp: {
bundles: {
app: {
src: './app/',
dest: './public/',
shouldCopyVendor: true,
shouldConcatVendor: false
}
}
}
})
What this means is scripts in ./app/ will be built as./public/app.js, styles will be concated to ./public/app.css,./public/
and any assets / views will go to .
The src property will default to the bundle name and if no bundlesshouldCopyVendor
specify then it is set for you on the first bundle.shouldConcatVendor
Set if you would like the vendor scripts and styles
to be concated to the beginning of the bundle files.
Note for Parched plugin authors
Because this behavior is specific to parched-tasks-webapp and messesstreamContext.bundleName
up any generic paths your workflow may assume, check for in your plugins method.
`javascriptparched-tasks-webapp
export default function (Parched) {
Parched.createPlugin({
displayName: 'my-awesome-plugin',
transform (streamContext) {
let src = '*/.svg'
let dest = 'public/'
if (streamContext.bundleName) {
// we are being called by
src =
dest = streamContext.bundleDest
}
}
})
}