kevincaradant / web-template

Web-Template - Bootstrap / Sass / Angular / Gulp / Npm / Karma / Protractor / WebWorkers : http://kevincaradant.github.io/web-template

Web-Template

Why ?

If you often create new web projects, you know how long it can be to start from scratch. You just need to kick start your project 🚀 ? This repo has been made for you !

What's in the magic box ?

I propose a configuration but of course, you can customize it.

Stack :

• Gulp 4
• Angularjs
• Sass
• Ngdocs
• Karma
• Protractor

Workflow Features

• Gulp fully automated workflow
• Development and production environment targets
• Unit and E2E test samples
• Coverage to know if your code is tested enough
• Sass linting, sourcemaps minify and concat
• ngDocs documentation generator for AngularJS
• Git Hook Angular commit message must follow the Angular conventions
• Github release to create a release of your code on Github
• Github gh-pages to publish your work on gh-pages
• Livereload to work without pressing F5 every second

Main librairies into the project :

• Bootstrap
• Font-Awesome
• Angular
  • Angular-mocks
  • Angular-translate
  • Angular-sanitize
  • Angular-ui-bootstrap
  • Angular-animate
  • Angular-ui-router
• Rx

Install & run

$ npm install --no-optional
$ npm run dev

Global Dependencies

Dependency	Version	Install
NodeJS	5.x.x	http://node.org
Npm	3.x.x	http://node.org
Gulp CLI	0.4.x	npm install gulpjs/gulp-cli#4.0 -g
PhantomJS	2.x.x	npm install phantomjs-prebuilt -g

Usage

Tasks

• $ gulp clean: Remove generated folders - build, docs, coverage, .publish, complexity_report
• $ gulp build-doc: Generate template documentation
• $ gulp serve-doc: Start web-server and live-reload to read the documentation
• $ gulp build: Create distribution package for the development environment
• $ gulp build --production: Create distribution package for the production environment
• $ gulp serve: Start web-server and live-reload. Use the argument --PORT=XXXX to set manually the PORT
• $ gulp unit: Execute unit tests with Karma
• $ gulp e2e: Execute e2e tests with Protractor. Use the argument --PORT=XXXX to set manually the PORT
• $ gulp plato: Build a static analysis and complexity report
• $ gulp xo: Lint Javascript code
• $ gulp release: Automate release workflow
• $ gulp release --patch: Automate release workflow for a patch release (ex: v.0.0.+1)
• $ gulp release --minor: Automate release workflow for a minor release (ex: v.0.+1.0)
• $ gulp release --major: Automate release workflow for a major release (ex: v.+1.0.0)

Environments

Development:

• $ npm run dev is equivalent to $ gulp build && gulp serve

Production:

• $ npm run prod is equivalent to $ gulp build --production

Test:

• $ npm run test is equivalent to $ gulp unit && gulp e2e

Documentation:

• $ npm run doc is equivalent to $ gulp build-doc && gulp serve-doc See the browser on : http://localhost:8181

Change Log

This project generates the CHANGELOG.md from Git metadata using the conventional-changelog library. The commit message must follow the Angular conventions.

Quick custom

Before you really start your own project, I recommend you to search for "CUSTOM" occurrences in the project. Everything with CUSTOM is something you may want to change.

Contribution

I think the project has a nice & clean structure. If you have better ideas I would be glad to hear from you and why not propose a pull request.

In order to contribute, please run npm test and check you don't have any JSHint error by running gulp xo

Cheers !

web-template's Issues

bug: Animate doesn't work since uncss is activated

bug: Check if all 'watch' and 'auto reload' works well with gulp.

When filters are changed ?