@cy0325/htmltest v1.0.1
HTML5 Template
Use Gulp.js to build HTML5 project with modules.
Getting Started
Development tools
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/**/_*']