More minor build tweaks and docs updates.

This commit is contained in:
Bardi Harborow 2017-04-20 20:33:51 +10:00
parent fb3303f5dd
commit 2906b612d5
10 changed files with 38 additions and 40 deletions

View File

@ -25,7 +25,7 @@ restrictions:
respect the opinions of others.
* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
Use [GitHub's "reactions" feature](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments)
instead. We reserve the right to delete comments which violate this rule.
* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
@ -42,7 +42,7 @@ Our bug tracker utilizes several labels to help organize and identify issues. He
- `docs` - Issues for improving or updating our documentation.
- `examples` - Issues involving the example templates included in our docs.
- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
- `grunt` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.
- `help wanted` - Issues we need or would love help from the community to resolve.
- `js` - Issues stemming from our compiled or source JavaScript files.
- `meta` - Issues with the project itself or our GitHub repository.
@ -241,7 +241,7 @@ includes code changes) and under the terms of the
### Checking coding style
Run `grunt test` before committing to ensure your changes follow our coding standards.
Run `npm run test` before committing to ensure your changes follow our coding standards.
## License

View File

@ -86,7 +86,7 @@ Bootstrap's documentation, included in this repo in the root directory, is built
### Running documentation locally
1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
2. Run `grunt` (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
2. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
4. Open <http://localhost:9001> in your browser, and voilà.

View File

@ -1,7 +1,9 @@
const fs = require('fs')
fs.readFile('package.json', (err, data) => {
if (err) throw err
if (err) {
throw err
}
const pkg = JSON.parse(data)
const year = new Date().getFullYear()
@ -9,7 +11,7 @@ fs.readFile('package.json', (err, data) => {
const stampTop =
`/*!
* Bootstrap v${pkg.version} (${pkg.homepage})
* Copyright 2011-${year} ${pkg.author}
* Copyright 2011-${year} ${pkg.author}
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@ -32,9 +34,8 @@ if (typeof jQuery === 'undefined') {
process.stdout.write(stampTop)
process.stdin.on('end', () => {
process.stdout.write(stampEnd);
});
process.stdout.write(stampEnd)
})
process.stdin.pipe(process.stdout)
})

View File

@ -5,7 +5,7 @@ description: Details on how to use Bootstrap's included build tools to compile s
group: getting-started
---
Bootstrap uses [Grunt](http://gruntjs.com) for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code, running tests, and more.
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
## Contents
@ -14,49 +14,46 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its CSS and JavaScript build syst
## Tooling setup
To use our Gruntfile and run our documentation locally, you'll need a copy of Bootstrap's source files, Node, and Grunt. Follow these steps and you should be ready to rock:
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
2. Install the Grunt command line tools, `grunt-cli`, with `npm install -g grunt-cli`.
3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json).
2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json).
4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
- **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
When completed, you'll be able to run the various Grunt commands provided from the command line.
When completed, you'll be able to run the various commands provided from the command line.
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
[gembundler]: https://bundler.io/
## Using Grunt
## Using NPM scripts
Our Gruntfile includes the following commands and tasks:
Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes the following commands and tasks:
| Task | Description |
| --- | --- |
| `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
| `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
| `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
| `npm test` | Run `npm test` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `npm run dist` | `npm run dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
| `npm run docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `npm run docs-serve`. |
## Autoprefixer
Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/v4-dev/grunt/postcss.js) for details.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.js) for details.
## Local documentation
Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started:
1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
2. From the root `/bootstrap` directory, run `npm run docs-serve` in the command line.
3. Open <http://localhost:9001> in your browser, and voilà.
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
## Troubleshooting
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
[autoprefixer]: https://github.com/postcss/autoprefixer

View File

@ -5,7 +5,7 @@ description: Customize Bootstrap with Sass variables, easily toggling global pre
group: getting-started
---
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed.
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
## Customizing variables

View File

@ -22,7 +22,7 @@ layout: home
<div class="row">
<div class="col-sm-6 mb-3">
<h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
<p>
<a class="btn btn-bs" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
</p>

View File

@ -18,7 +18,6 @@
"no-extra-parens": "error",
"no-prototype-builtins": "off",
"no-template-curly-in-string": "error",
"no-unsafe-negation": "error",
"valid-jsdoc": "error",
// Best Practices
@ -45,7 +44,6 @@
"no-extra-bind": "error",
"no-extra-label": "error",
"no-floating-decimal": "error",
"no-global-assign": "error",
"no-implicit-coercion": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
@ -70,9 +68,8 @@
],
"no-multi-str": "error",
"no-new": "error",
"no-new-func": "off",
"no-new-func": "error",
"no-new-wrappers": "error",
"no-new": "error",
"no-octal-escape": "error",
"no-param-reassign": "off",
"no-proto": "error",
@ -94,6 +91,7 @@
"no-with": "error",
"prefer-promise-reject-errors": "error",
"radix": "error",
"require-await": "error",
"vars-on-top": "error",
"wrap-iife": "error",
"yoda": "error",
@ -128,8 +126,8 @@
"array-bracket-spacing": "error",
"block-spacing": "error",
"brace-style": "error",
"capitalized-comments": "off",
"camelcase": "error",
"capitalized-comments": "off",
"comma-dangle": "error",
"comma-spacing": "error",
"comma-style": "error",
@ -227,6 +225,7 @@
"object-shorthand": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-destructuring": "off",
"prefer-numeric-literals": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",

View File

@ -1,7 +1,7 @@
{
"env": {
"qunit": true,
"es6": false
"es6": false,
"qunit": true
},
"globals": {
"Util": false

View File

@ -6,7 +6,7 @@ Bootstrap uses [QUnit](https://qunitjs.com/), a powerful, easy-to-use JavaScript
* `vendor/` contains third-party testing-related code (QUnit and jQuery).
* `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
To run the unit test suite via [PhantomJS](http://phantomjs.org/), run `grunt test-js`.
To run the unit test suite via [PhantomJS](http://phantomjs.org/), run `npm run js-test`.
To run the unit test suite via a real web browser, open `index.html` in the browser.
@ -16,7 +16,7 @@ To run the unit test suite via a real web browser, open `index.html` in the brow
1. Locate and open the file dedicated to the plugin which you need to add tests to (`unit/<plugin-name>.js`).
2. Review the [QUnit API Documentation](https://api.qunitjs.com/) and use the existing tests as references for how to structure your new tests.
3. Write the necessary unit test(s) for the new or revised functionality.
4. Run `grunt test-js` to see the results of your newly-added test(s).
4. Run `npm run js-test` to see the results of your newly-added test(s).
**Note:** Your new unit tests should fail before your changes are applied to the plugin, and should pass after your changes are applied to the plugin.

View File

@ -30,15 +30,15 @@
"css-minify-docs": "cleancss --level 1 --source-map --output docs/assets/css/docs.min.css docs/assets/css/docs.min.css",
"js": "npm-run-all js-compile js-minify",
"js-docs": "npm-run-all js-lint-docs js-minify-docs",
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/",
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
"js-lint-docs": "eslint --config js/tests/.eslintrc.json docs/assets/js/",
"js-compile": "npm-run-all --parallel js-compile-*",
"js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed 's/^(import|export).*//' | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
"js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed \"s/^(import|export).*//\" | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
"js-compile-plugins": "babel js/src/ --out-dir js/dist/ --source-maps",
"js-minify": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
"js-minify-docs": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output docs/assets/js/docs.min.js docs/assets/js/vendor/anchor.min.js docs/assets/js/vendor/clipboard.min.js docs/assets/js/vendor/holder.min.js docs/assets/js/src/application.js",
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
"js-test-cloud": "ruby -run -ehttpd . -p3000 & grunt saucelabs-qunit",
"js-test-cloud": "ruby -run -ehttpd . -p3000 > /dev/null & grunt saucelabs-qunit",
"docs": "npm-run-all docs-compile docs-lint",
"docs-lint": "htmlhint --config docs/.htmlhintrc _gh_pages/ js/tests/visual/ && htmllint --rc docs/.htmllintrc _gh_pages/*.html _gh_pages/**/*.html js/tests/visual/*.html",
"docs-clean": "shx rm -r docs/dist/* && shx cp -r dist/* docs/dist/",
@ -50,7 +50,8 @@
"maintenance-shrinkwrap": "npm shrinkwrap --dev && shx mv npm-shrinkwrap.json build/npm-shrinkwrap.json",
"release-version": "node build/change-version.js",
"release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
"test": "npm-run-all --parallel css js && npm-run-all docs"
"dist": "npm-run-all --parallel css js",
"test": "npm-run-all dist docs"
},
"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",