Adds Modernizr 3 (#1940)

Fixes #1740 and #1605

- removes the static custom build of modernizr
- moves Modernizr to the bottom
- builds a custom modernizr in gulp
- adds tests for the generated modernizr
This commit is contained in:
Rob Larsen
2017-05-28 08:54:44 -04:00
committed by GitHub
parent 9888a8f5b4
commit 2ad7077517
12 changed files with 230 additions and 13 deletions

172
dist/.gitattributes vendored
View File

@@ -1 +1,173 @@
## GITATTRIBUTES FOR WEB PROJECTS
#
# These settings are for any web project.
#
# Details per file setting:
# text These files should be normalized (i.e. convert CRLF to LF).
# binary These files are binary and should be left untouched.
#
# Note that binary is a macro for -text -diff.
######################################################################
## AUTO-DETECT - Handle line endings automatically for files detected
## as text and leave all files detected as binary untouched.
## This will handle all files NOT defined below.
* text=auto
## SOURCE CODE
*.bat text
*.coffee text
*.css text
*.htm text
*.html text
*.inc text
*.ini text
*.js text
*.jsx text
*.json text
*.less text
*.php text
*.pl text
*.py text
*.rb text
*.sass text
*.scm text
*.scss text
*.sh text
*.sql text
*.styl text
*.ts text
*.xml text
*.xhtml text
## DOCUMENTATION
*.markdown text
*.md text
*.mdwn text
*.mdown text
*.mkd text
*.mkdn text
*.mdtxt text
*.mdtext text
*.txt text
AUTHORS text
CHANGELOG text
CHANGES text
CONTRIBUTING text
COPYING text
INSTALL text
license text
LICENSE text
NEWS text
readme text
*README* text
TODO text
## TEMPLATES
*.dot text
*.ejs text
*.haml text
*.handlebars text
*.hbs text
*.hbt text
*.jade text
*.latte text
*.mustache text
*.phtml text
*.tmpl text
## LINTERS
.csslintrc text
.eslintrc text
.jscsrc text
.jshintrc text
.jshintignore text
.stylelintrc text
## CONFIGS
*.bowerrc text
*.cnf text
*.conf text
*.config text
.editorconfig text
.gitattributes text
.gitconfig text
.gitignore text
.htaccess text
*.npmignore text
*.yaml text
*.yml text
Makefile text
makefile text
## HEROKU
Procfile text
.slugignore text
## GRAPHICS
*.ai binary
*.bmp binary
*.eps binary
*.gif binary
*.ico binary
*.jng binary
*.jp2 binary
*.jpg binary
*.jpeg binary
*.jpx binary
*.jxr binary
*.pdf binary
*.png binary
*.psb binary
*.psd binary
*.svg text
*.svgz binary
*.tif binary
*.tiff binary
*.wbmp binary
*.webp binary
## AUDIO
*.kar binary
*.m4a binary
*.mid binary
*.midi binary
*.mp3 binary
*.ogg binary
*.ra binary
## VIDEO
*.3gpp binary
*.3gp binary
*.as binary
*.asf binary
*.asx binary
*.fla binary
*.flv binary
*.m4v binary
*.mng binary
*.mov binary
*.mp4 binary
*.mpeg binary
*.mpg binary
*.swc binary
*.swf binary
*.webm binary
## ARCHIVES
*.7z binary
*.gz binary
*.rar binary
*.tar binary
*.zip binary
## FONTS
*.ttf binary
*.eot binary
*.otf binary
*.woff binary
*.woff2 binary
## EXECUTABLES
*.exe binary
*.pyc binary

1
dist/.gitignore vendored
View File

@@ -1,2 +1,3 @@
# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
# Useful .gitignore templates: https://github.com/github/gitignore

2
dist/index.html vendored
View File

@@ -12,7 +12,6 @@
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lte IE 9]>
@@ -21,6 +20,7 @@
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>

File diff suppressed because one or more lines are too long

3
dist/js/vendor/modernizr-3.5.0.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -14,9 +14,12 @@ import runSequence from 'run-sequence';
import archiver from 'archiver';
import glob from 'glob';
import del from 'del';
import sri from 'node-sri'
import sri from 'node-sri';
import modernizr from 'modernizr';
import pkg from './package.json';
import modernizrConfig from './modernizr-config.json';
const dirs = pkg['h5bp-configs'].directories;
@@ -93,8 +96,10 @@ gulp.task('copy:index.html', (done) =>
if (err) throw err
let version = pkg.devDependencies.jquery;
let modernizrVersion = pkg.devDependencies.modernizr;
gulp.src(`${dirs.src}/index.html`)
.pipe(plugins().replace(/{{JQUERY_VERSION}}/g, version))
.pipe(plugins().replace(/{{MODERNIZR_VERSION}}/g, modernizrVersion))
.pipe(plugins().replace(/{{JQUERY_SRI_HASH}}/g, hash))
.pipe(gulp.dest(dirs.dist));
done();
@@ -149,6 +154,14 @@ gulp.task('copy:normalize', () =>
.pipe(gulp.dest(`${dirs.dist}/css`))
);
gulp.task( 'modernizr', (done) =>{
modernizr.build(modernizrConfig, (code) => {
fs.writeFile(`${dirs.dist}/js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`, code, done);
});
});
gulp.task('lint:js', () =>
gulp.src([
'gulpfile.js',
@@ -176,7 +189,7 @@ gulp.task('archive', (done) => {
gulp.task('build', (done) => {
runSequence(
['clean', 'lint:js'],
'copy',
'copy', 'modernizr',
done)
});

30
modernizr-config.json Normal file
View File

@@ -0,0 +1,30 @@
{
"minify": true,
"options": [
"domPrefixes",
"prefixes",
"addTest",
"hasEvent",
"mq",
"prefixedCSSValue",
"testAllProps",
"testProp",
"testStyles",
"setClasses"
],
"feature-detects": [
"test/custom-elements",
"test/history",
"test/pointerevents",
"test/postmessage",
"test/webgl",
"test/websockets",
"test/css/animations",
"test/css/columns",
"test/css/flexbox",
"test/elem/picture",
"test/img/sizes",
"test/img/srcset",
"test/workers/webworkers"
]
}

View File

@@ -20,6 +20,7 @@
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1",
"mocha": "^3.2.0",
"modernizr": "3.5.0",
"node-sri": "^1.1.1",
"normalize.css": "5.0.0",
"run-sequence": "^1.2.2",

View File

@@ -12,7 +12,6 @@
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lte IE 9]>
@@ -21,6 +20,7 @@
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>

File diff suppressed because one or more lines are too long

View File

@@ -68,6 +68,11 @@ function runTests() {
checkString(path.resolve(dir, 'index.html'), string, done);
});
it('"index.html" should contain the correct Modernizr version in the local URL', (done) => {
const string = `js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`;
checkString(path.resolve(dir, 'index.html'), string, done);
});
it('"main.css" should contain a custom banner', function (done) {
const string = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n/*\n`;
checkString(path.resolve(dir, 'css/main.css'), string, done);

View File

@@ -51,7 +51,7 @@ const expectedFilesInDistDir = [
'js/plugins.js',
'js/vendor/',
`js/vendor/jquery-${pkg.devDependencies.jquery}.min.js`,
'js/vendor/modernizr-2.8.3.min.js',
`js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`,
'LICENSE.txt',
'robots.txt',