c16fee5efd
Conflicts: .travis.yml Gruntfile.js bower.json dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.js dist/js/bootstrap.min.js docs/_data/glyphicons.yml docs/_includes/components/breadcrumbs.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/labels.html docs/_includes/components/list-group.html docs/_includes/components/media.html docs/_includes/components/navs.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/components/thumbnails.html docs/_includes/components/wells.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/grunt.html docs/_includes/getting-started/license.html docs/_includes/getting-started/template.html docs/_includes/header.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/js/transitions.html docs/_includes/nav/javascript.html docs/_layouts/default.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/assets/js/vendor/FileSaver.js docs/assets/js/vendor/autoprefixer.js docs/assets/js/vendor/uglify.min.js docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.min.js docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/narrow-jumbotron/narrow-jumbotron.css docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/theme/index.html grunt/configBridge.json js/affix.js js/carousel.js js/collapse.js js/dropdown.js js/modal.js js/popover.js js/scrollspy.js js/tab.js js/tests/unit/affix.js js/tests/unit/button.js js/tests/unit/carousel.js js/tests/unit/modal.js js/tests/unit/tooltip.js js/tooltip.js less/badges.less less/glyphicons.less less/type.less less/variables.less package.json scss/_dropdown.scss scss/_forms.scss test-infra/npm-shrinkwrap.json
3.1 KiB
| layout | title |
|---|---|
| page | Compiling with Grunt |
Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.
Install Grunt
To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.
From the command line:
- Install
grunt-cliglobally withnpm install -g grunt-cli. - Navigate to the root
/bootstrapdirectory, then runnpm install. npm will look at package.json and automatically install the necessary local dependencies listed there. - Install Ruby, install Bundler with
gem install bundler, and finally runbundle. This will install all Ruby dependencies, such as Jekyll and Sass linter.
When completed, you'll be able to run the various Grunt commands provided from the command line.
Unfamiliar with npm? Don't have node installed? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.
Available Grunt commands
Build - grunt
Run grunt to run tests locally and compile the CSS and JavaScript into /dist. Uses Sass and UglifyJS.
Only compile CSS and JavaScript - grunt dist
grunt dist creates the /dist directory with compiled files. Uses Sass and UglifyJS.
Tests - grunt test
Runs JSHint and QUnit tests headlessly in PhantomJS (used for CI).
Build and test docs assets - grunt docs
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve.
Watch - grunt watch
This is a convenience method for watching just Sass files and automatically building them whenever you save.
Use another Sass compiler
Bootstrap is compiled with libsass by default.
Use another compiler by setting the TWBS_SASS environment variable to:
sassto use Ruby Sass via grunt-contrib-sass.libsass(default) to use libsass via grunt-sass.
For example, run TWBS_SASS=sass grunt to test and build Bootstrap with Ruby Sass.
Troubleshooting dependencies
Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install.