https://github.com/ashawley/npm-html5-boilerplate-hello-world

Hello, world HTML5 boilerplate with Node.js
https://github.com/ashawley/npm-html5-boilerplate-hello-world

css3 html5 html5-boilerplate javascript nodejs npm

Last synced: 23 days ago
JSON representation

Hello, world HTML5 boilerplate with Node.js

• Host: GitHub
• URL: https://github.com/ashawley/npm-html5-boilerplate-hello-world
• Owner: ashawley
• License: mit
• Created: 2018-12-19T16:36:40.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-20T18:58:47.000Z (about 6 years ago)
• Last Synced: 2024-10-31T12:46:51.334Z (2 months ago)
• Topics: css3, html5, html5-boilerplate, javascript, nodejs, npm
• Language: CSS
• Size: 16.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
Hello, HTML5 boilerplate

==========================

[![Build Status](https://travis-ci.org/ashawley/npm-html5-boilerplate-hello-world.svg?branch=master)](https://travis-ci.org/ashawley/npm-html5-boilerplate-hello-world)

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

[beefy]: http://didact.us/beefy/

[browserify]: http://browserify.org/

[budo]: http://github.com/mattdesl/budo

[HTML5 boilerplate]: https://html5boilerplate.com/

[jasmine]: http://jasmine.github.io/

[jshint]: http://jshint.com/

[karma]: http://karma-runner.github.io/

[less]: http://lesscss.org/

[Node.js]: http://nodejs.org/

[uglify-js]: http://lisperator.net/uglifyjs/