generator-web-initium
v0.1.0
Published
A yeoman generator that will help you bootstrap your webapp with gulp.
Downloads
16
Maintainers
Readme
generator-web-initium
Web Initium is a yeoman generator that will help you bootstrap your webapp with gulp. Choose your favorite pre-processor, JS libraries etc... and let Web Initium do the rest.
There are of course lots of webapp scaffolding generators out there (for example the awesome generator-gulp-webapp. This repo, however, is made to make the build and develop process more personal, richer and efficient. In other words, the developer can choose from a broad variety of customizations and automated tasks, ready to make it big and rich! :)
Dependencies
Please make sure you have the following installed globally:
Features
- SASS preprocessing
- Create CSS sourcemaps
- CSS Autoprefixer
- BrowserSync (livereload, sync on other devices)
- Twig Templating Engine
- Image resizer (e.g. for generating favicons)
- JSDoc generator
- SASSdoc generator
- Style Guide generator
- JSHint
- Create a build folder:
- Bump a version number (also git tag)
- Automatic image optimization
- Concat and minify JS
- Minifies HTML
- Copies all necessary files
How to install
Make sure you have the dependencies described above installed:
NodeJS:
Go to nodejs.org and download & install NodeJS on your System.
Bower
Run npm install -g bower
to install bower globally on your system
Yeoman
Run npm install -g yo
to install yeoman globally on your system
Web Initium Generator
Run npm install -g generator-web-initium
.
Also, make sure GraphicsMagick or ImageMagick is installed on your system and properly set up in your PATH
.
Ubuntu:
apt-get install imagemagick
apt-get install graphicsmagick
Mac OS X (using Homebrew):
brew install imagemagick
brew install graphicsmagick
Windows & others:
- GraphicsMagick: http://www.graphicsmagick.org/download.html
- ImageMagick: http://www.imagemagick.org/script/binary-releases.php
Confirm that GraphicsMagick or ImageMagick is properly set up by executing gm -version
or convert -version
in a terminal.
Configurations
In the generated gulpfile.js
file, please adjust the global var config
to your needs.
Start
Run yo web-initium
and follow the steps. After successfully installed everything, run gulp serve
(or alternatively npm start
) to start the server with your generated webapp.
How to build
Run gulp build
, this will create a dist
folder with all the necessary files
How it works
All the dev files are situated in the src
directory:
- CSS If you are using a css pre-processor, use the corresponding folder (
src/scss
,src/less
,src/styl
). A css file will be generated in thecss
folder. Sourcemap files will also be generated in this folder. If you are NOT using a css pre-processor, then just use files in thesrc/css
folder. - HTML HTML files are in the
src/views
folder. Since we are usingtwig
as a template language, we have asrc/views/layout.twig
file, that can be used for all pages. All twig files in thesrc/views/pages
folder should have the same name as the.json
files. This way, content and markup are nicely separated. - Assets All images, fonts, icons and other non-script files should be put in the
src/assets
directory. - JavaScript Use the
src/js
folder. If you need to add scripts to your html files, please do so in between the<!-- build:js /js/bundle.js --> <!-- endbuild -->
comments in thesrc/views/layout
file, as this will make sure your script will be concatenated and minified together with all the other scripts. - Documentation The
src/doc
folder is where all the generated documentation will be. For JavaScript, we'll be using JSDoc, for SASS SassDoc. - Style Guide We'll be using SC5 Style Guide. The generated content will be written to
./styleguide
. This will be automaticaly served on port 3002 (default) if you rungulp
.
Todo's:
- Support LESS and Stylus
- Looking into gulp-load-plugins
- Support for coffeescript & typescript
- Add options for using sourcemaps, docs and stylesheet.
- Generate favicons / apple icons
- Improve tests
- Documentation
License
generator-web-initium is distributed under the MIT License.