HTML5 Template

Use Gulp.js to build HTML5 project with modules.

Getting Started

Development tools

• Babel
• Handlebars
• Nunjucks
• SCSS

Install node package

Run command line:

npm install

Start Develop

Run command line:

gulp

Unit Test (Jasmine)

Run jasmine unit test case (./src/app/*.spec.js & ./src/js/*.spec.js) Run command line:

gulp unit-test

WCAG Checking

Check all html output files by gulp-accessibility and output the report to ./reports/wcag/ Run command line:

gulp wcag:check

Options

Edit gulp.options.js to change Gulp.js tasks options.

gulpOptions.server

Setup localhost server options

• root: string (default: './app/') - server root folder
• port: string (default: '30000') - server port

gulpOptions.cmsServer

Setup CMS localhost server options

• port: string (default: '30001') - server port

gulpOptions.outputFiles

Build folder structure options. The folder structure will under gulpOptions.server.root.

• fonts: string (default: 'fonts') - fonts files output location
• img: string (default: 'images') - images files output location
• js: string (default: 'js') - javascript files output location
• babel: string (default: 'babel.js') - all html files pre-load javascript file name if use handlebars / nunjucks template build up html. Set '' if not need pre-load.
• scss: string (default: 'styles') - css files output location
• html: string (default: '') - html files output location

gulpOptions.favicon

gulp-favicons options. See the Favicons README for more information. Default:

icons: {
    android: false,
    appleIcon: false,
    appleStartup: false,
    favicons: true,
    firefox: false,
    windows: true,
    yandex: false
},
pipeHTML: false

gulpOptions.es5

Is ES5 coding? If use ES5, will use gulp-include to make inclusion of files a breeze. Please make sure all include files is ES5 coding. Default: false

gulpOptions.gulpWatch

Dose use gulp-watch? Default: false

gulpOptions.watchAppFolder

If set true, will build the files when ./src/app/ files change. Default: true

gulpOptions.htmlTemplate

Ues whilch tool to build html files. Vaule: 'hb' | 'nunjucks' Default: 'hb'

gulpOptions.htmlbeautify

gulp-html-beautify options.

gulpOptions.accessibility

gulp-accessibility options. View AccessSniff options for all available options. Default:

accessibilityLevel: 'WCAG2AA',
force: true,
reportLevels: {
    notice: false,
    warning: true,
    error: true
}

gulpOptions.defaultTasks

Tasks inculde Gulp.js default task. Default:

'fonts:copy',   // copy fonts files to output location
'img:copy', // copy images files to output location
'favicon:build',    // build favicon to root location
'js:build', // check with ./src/eslint.config.js and build javascript files by Babel to output location
'scss:build',   // check with ./src/stylelint.config.js and build css files by SCSS to output location
'content:get',  // get page content json files. Then build html by handlebars / nunjucks to output location and keep watch handlebars / nunjucks files
'js:watch', // keep watch javascript files
'scss:watch',   // keep watch scss files
'content:watch' // keep watch page content json files

gulpOptions.testTasks

Tasks inculde Gulp.js test task. Default:

'unit-test' // run unit test

API

Edit gulp.api.js to add API handle to localhost server. e.g.:

const gulpAPI = [
    {
        route: '/api',
        handle: (req, res, next) => {
            res.end();
        }
    }
];

Watch Files Location

Fonts Files

['./src/fonts/**/*', '!./src/fonts/**/_*']

Images Files

['./src/img/**/*', '!./src/img/**/_*', '!./src/img/_**/*']

Favicon File

'./src/favicon.png'

Javascript Files

gulpOptions.es5: false

// will browserify 
['./src/js/**/*.js', '!./src/js/**/_*.js', '!./src/js/**/*.spec.js', '!./src/js/**/*.min.*', '!./src/js/**/*.es5.js']

// will not browserify
// for any es5 plugins if need
// if file name is *.es5.js, build file name will remove '.es5'
['./src/js/**/*.es5.js', './src/js/**/*.min.js', '!./src/js/**/_*.es5.js', '!./src/js/**/_*.min.js']

gulpOptions.es5: true

['./src/js/**/*.js', '!./src/js/**/_*.js', '!./src/js/**/*.spec.js']

SCSS Files

['./src/css/**/*.scss', '!./src/css/**/_*.scss']

Handlebars Files

['./src/html/**/*.handlebars', './src/html/**/*.hbs', '!./src/html/**/_*.handlebars', '!./src/html/**/_*.hbs']

Nunjucks Files

['./src/html/**/*.html', '!./src/html/**/_*.html']

HTML Content JSON Files

['./src/data/**/*.json', '!./src/data/**/_*.json']

Fonts Files

['./src/fonts/**/*', '!./src/fonts/**/_*']

Fonts Files

['./src/fonts/**/*', '!./src/fonts/**/_*']