edisonthk / gulp-boilerplate-with-angular Goto Github PK

• Base boilerplate

To start using the boilerplate, first install all the dependencies and then run one of the gulp tasks:

$ npm i
$ bower i
$ gulp dev

The default working directory for development is src/. This directory contains all the styles, scripts, fonts and images used to create the front-end of the website.

bower_components/
dist/
src/
|- fonts/
	|- examplefont.eot
	|- examplefont.svg
	|- examplefont.ttf
	|- examplefont.woff
	|- iconfont/
		|- iconfont01.svg
		|- iconfont02.svg
		|- iconfont03.svg
|- images/ 
|- js/
	|- components/
		|- helloWorld/
			|- helloWorld.js
			|- helloWorld.spec.js
	|- app.js
|- sass/
	|- components/
	|- _variables.scss
	|- main.scss
|- index.html 

The src/fonts/ folder should contain the self hosted fonts for the site. All the fonts directly inside this folder will be copied to the dist/fonts/ folder automatically.

In order to generate a custom icon font, place your svg files inside the src/fonts/iconfont/ folder and when the iconfont task runs, all the svgs inside this folder will be combined to create a custom icon font. Running this task will also generate a sass template file exported to src/sass/components/_iconfont.scss with the @font-face declaration and the font classes, for example:

&--iconfont01:before { content: '\e001'; }
&--iconfont02:before { content: '\e002'; }
&--iconfont03:before { content: '\e003'; }

This auto generated file is explictily included in the Sass manifest.

All images should be placed inside the src/images/ folder. This is for consistency as opposed to a limitation enforced by the imagemin task as this task will look for and minify all images inside the src/ folder that have any of the following extensions: .jpg .png .gif .svg

All the scripts should be placed inside the src/js/ folder. These files will all be jshint'ed and then injected into index.html. The current setup assumes a modular approach when adding new features so that everything that is require for a module is inside of its own folder - this can include tests, templates and specific styles if needed. For example:

|- js/
	|- components/
		|- helloWorld/
			|- helloWorld.js
			|- helloWorld.spec.js
			|- helloWorld.e2e.js
			|- helloWorld.html
			|- helloWorld.css

This boilerplate supports bower components. The components are installed in the bower_components/ folder and are automatically injected into index.html either at the top if it's a CSS component or at the bottom if it's JS. The gulp task used to make this work assumes that the Bower component contains the main property inside of bower.json that points the final asset. For example: "main": "dist/jquery.js",

This plugin uses the scss format for Sass. All scss files should be placed in the src/sass/ folder. The styles manifest is main.scss.