generator-distilled
v1.1.2
Published
Scaffold an interactive data-vis. Forked from generator-webapp, but with custom features for common Distilled workflows.
Downloads
2
Maintainers
Readme
Distilled's web app generator
Yeoman generator that scaffolds out a front-end web app.
Features
- CSS Autoprefixing
- Built-in preview server with LiveReload
- Automagically compile ES6 (with Babel) & Sass
- Automagically lint your scripts
- Automagically wire up your Bower components with grunt-wiredep.
- Awesome Image Optimization (via OptiPNG, pngquant, jpegtran and gifsicle)
- Mocha Unit Testing with PhantomJS
- Bootstrap for Sass (Optional)
- Leaner Modernizr builds (Optional)
PLUS only in this forked version:
- Social buttons, embed code and social platform meta tags
- Easy git deployment to a server with Grunt Build-Control
- Automatically zip deliverables with Grunt Compress
- Native OS notifications with Grunt Notify
For more information on what generator-webapp
can do for you, take a look at the Grunt tasks used in our package.json
.
Getting Started
- Install:
npm install -g generator-distilled
- Run:
yo distilled
- Run
grunt
for building andgrunt serve
for preview*.--allow-remote
option for remote access. - Run
grunt deploy
to upload a production build to a server via SSH with Git - Run
grunt zip
to create a zipped deliverable file in/zips
Third-Party Dependencies
(HTML/CSS/JS/Images/etc)
Third-party dependencies are managed with grunt-wiredep. Add new dependencies using Bower and then run the Grunt task to load them:
$ bower install --save jquery
$ grunt wiredep
This works if the package author has followed the Bower spec. If the files are not automatically added to your source code, check with the package's repo for support and/or file an issue with them to have it updated.
To manually add dependencies, bower install --save depName
to get the files, then add a script
or style
tag to your index.html
or another appropriate place.
The components are installed in the root of the project at /bower_components
. To reference them from index.html, use src="bower_components"
or src="/bower_components"
. Treat the bower_components
directory as if it was a sibling to index.html
.
Testing Note: a project checked into source control and later checked out needs to have bower install
run from the test
folder as well as from the project root.
Grunt Serve Note
Note: grunt server
was used for previewing in earlier versions of the project, and has since been deprecated in favor of grunt serve
.
Docs
We have recipes for integrating other popular technologies like Compass.
Options
--skip-install
Skips the automatic execution of
bower
andnpm
after scaffolding has finished.--test-framework=<framework>
Either
mocha
orjasmine
. Defaults tomocha
.--no-babel
Turn off Babel support.
Contribute
See the contributing docs.
Note: We are regularly asked whether we can add or take away features. If a change is good enough to have a positive impact on all users, we are happy to consider it.
If not, generator-webapp
is fork-friendly and you can always maintain a custom version which you npm install && npm link
to continue using via yo webapp
or a name of your choosing.