Hello, HTML5 boilerplate
Getting started with the HTML5 boilerplate for Node.js using beefy, browserify, budo, jshint, karma, jasmine, less and uglify-js.
Clone the repository:
$ git clone [email protected]/ashawley/npm-html5-boilerplate-hello-world.git -o upstream
Initialize project:
$ npm init
package name: hello-html5-boilerplate
version: 0.0.0
description: Hello, HTML5 boilerplate
entry point: app/js/index.js
test command: karma start --single-run
git repository: [email protected]:ashawley/npm-html5-boilerplate-hello-world.git
keywords: html5
author: Aaron S. Hawley
license: MIT
About to write to package.json:
{
"name": "npm-html5-boilerplate-hello-world",
"version": "0.0.0",
"description": "Hello, HTML5 boilerplate",
"main": "app/js/index.js",
"directories": {
"test": "test"
},
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "karma start --single-run"
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/ashawley/npm-html5-boilerplate-hello-world.git"
},
"keywords": [
"html5"
],
"author": "Aaron S. Hawley",
"license": "MIT",
"bugs": {
"url": "https://github.com/ashawley/npm-html5-boilerplate-hello-world/issues"
},
"homepage": "https://github.com/ashawley/npm-html5-boilerplate-hello-world#readme"
}
Is this OK? (yes) yes
Install package dependencies:
$ npm install html5-boilerplate --save-prod
+ [email protected]
added 1 package and audited 1 package in 2.974s
found 0 vulnerabilities
Add development dependencies:
$ npm install beefy browserify browserify-shim \
budo http-server jshint \
less less-plugin-clean-css \
uglify-js --save-dev
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 675 packages from 417 contributors and audited 6600 packages in 39.384s
Copy artifacts from html5-boilerplate:
$ cp -a ./node_modules/html5-boilerplate/dist ./app
Build task:
$ npm run build
> [email protected] prebuild ./
> npm install && npm run lint
audited 5395 packages in 7.602s
found 0 vulnerabilities
> [email protected] lint ./
> jshint ./app/js --exclude ./app/dist
> [email protected] build ./
> npm run build:browserify && npm run build:uglify && npm run build:less
> [email protected] build:browserify ./
> browserify ./app/js/index.js -o ./app/dist/js/index.js
> [email protected] build:uglify ./
> uglifyjs ./app/dist/js/index.js -c -o ./app/dist/js/index.min.js
> [email protected] build:less ./
> lessc --clean-css ./app/css/index.less ./app/dist/css/index.css
Testing:
$ npm install jasmine-core jasmine-jquery karma karma-browserify \
karma-chrome-launcher karma-coverage \
karma-firefox-launcher karma-jasmine \
karma-jasmine-jquery karma-junit-reporter \
karma-less-preprocessor \
karma-ng-html2js-preprocessor \
karma-phantomjs-launcher --save-dev
+ [email protected]
+ [email protected]
+ [email protected]
+ @metahub/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
End-to-end testing requires protractor:
$ npm install protractor phantomjs-prebuilt --save-dev
$ webdriver-manager update
$ webdriver-manager start --detach
$ protractor ./protractor.conf.js
You can start the server with:
$ npm run watch:start
> [email protected] watch:start ./
> npm run start:budo
> [email protected] start:budo ./
> budo app/js/index.js:dist/js/index.js -v -H localhost -p 8080 -d ./app --open --live -- -o app/dist/js/index.js
[0002] info Server running at http://localhost:8080/ (connect)
[0002] info LiveReload running
[0003] 222ms 0B GET 200 /
When you're done with end-to-end testing:
$ webdriver-manager shutdown
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent