Yeoman generator that scaffolds out a front-end web app using Gulp, Bower and Bootstrap 3.
- CSS & JS minification
- Sass compilation
- EJS templating
- Sprite generation
- Image optimization
- Bower packages
- Built-in preview server
- Install:
npm install -g generator-gulp-bootstrap3
- Init:
yo gulp-bootstrap3
- Build:
gulp
- Run:
gulp watch
For sprite generation install node-canvas.
For each sass file in src/css
a minified CSS file is generated which gets stored in the build assets/css
folder. Partials stored in src/css/partials
can be included with @import file
. Vendor CSS assets can be stored in src/vendor
and included with @import file.css
as well. Bootstrap 3 is imported by default.
For each JS file in src/js
a minified JS file is generated which gets stored in the build assets/js
folder. Partials stored in src/js/partials
can be included with //= require partials/file.js
. Vendor JS assets can be stored in src/vendor
and included with //=require ../vendor/file.js
. Bootstrap 3 is imported by default.
For each EJS template in src/templates
a HTML file is generated and stored in the build folder. Partials stored in src/templates/partials
can be included with <% include partials/footer %>
All images stored in src/images/sprite/
will be combined in to one sprite, which gets stored in src/images/sprite.png
and src/images/sprite-2x.png
.
Retina
By default retina is turned on, therefore you should only store retina images in the sprite folder. For each retina image a normal version is generated automatically.
Sass example
@import sprite
// cart icon (cart.png in sprite directory)
.cart
+sprite($cart)
All HTML elements which use the sprite should have class="icon"
Check out the css-sprite documentation for other examples.
All images stored in src/images
are automatically optimized using gulp-imagemin and saved in the build assets/images
directory.
All fonts in the source directory or underlying subdirectories get copied to the build assets/fonts
folder, removing relative paths.
A live reload server is included as well. Install the live reload Chrome extension if you don't use the included connect server.