Skip to content

ashawley/npm-html5-boilerplate-hello-world

Repository files navigation

Hello, HTML5 boilerplate

Build Status

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 git@github.com/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: git@github.com: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://git@github.com/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
+ html5-boilerplate@6.1.0
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
+ http-server@0.11.1
+ browserify-shim@3.8.14
+ browserify@16.2.3
+ jshint@2.9.7
+ less-plugin-clean-css@1.5.1
+ less@3.9.0
+ uglify-js@3.4.9
+ beefy@2.1.8
+ budo@11.5.0
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

> hello-html5-boilerplate@0.0.0 prebuild ./
> npm install && npm run lint

audited 5395 packages in 7.602s
found 0 vulnerabilities

> hello-html5-boilerplate@0.0.0 lint ./
> jshint ./app/js --exclude ./app/dist

> hello-html5-boilerplate@0.0.0 build ./
> npm run build:browserify && npm run build:uglify && npm run build:less

> hello-html5-boilerplate@0.0.0 build:browserify ./
> browserify ./app/js/index.js -o ./app/dist/js/index.js

> hello-html5-boilerplate@0.0.0 build:uglify ./
> uglifyjs ./app/dist/js/index.js -c -o ./app/dist/js/index.min.js

> hello-html5-boilerplate@0.0.0 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
+ karma-coverage@1.1.2
+ jasmine-jquery@2.1.1
+ karma-chrome-launcher@2.2.0
+ @metahub/karma-jasmine-jquery@2.0.1
+ karma-firefox-launcher@1.1.0
+ karma-junit-reporter@1.2.0
+ jasmine-core@3.3.0
+ karma-browserify@6.0.0
+ karma@3.1.4
+ karma-jasmine@2.0.1
+ karma-ng-html2js-preprocessor@1.0.0
+ karma-phantomjs-launcher@1.0.4
+ karma-less-preprocessor@0.3.3

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

> hello-html5-boilerplate@0.0.0 watch:start ./
> npm run start:budo


> hello-html5-boilerplate@0.0.0 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