Any comparison to using gulp & bower versus the webpack loader for bootstrap
justin808 opened this issue · 9 comments
There's a couple webpack loaders that try to load bootstrap with either less or sass:
Any opinion on why the gulp + bower way might be superior.
The main advantage is that you always have the latest version of bootstrap-sass, straight from the original repo, with no dependency on 3rd party integration. When a new version of bootstrap-sass is released you can start using it right away. The disadvantage is that bootstrap-sass must be set up in the project, though the the setup is fairly minimal.
So is gulp actually required? Or is the workflow really just setting up webpack to read the bootstrap assets from the bower directory, and then the bootstrap assets are just like any other scss and js assets that webpack uses?
For production, gulp calls webpack, then appends hashes to assets URLs in index.html, and gzips everything. For development, gulp provides a static file server with livereload that calls webpack with development settings. I recommend reading the gulpfile, it's pretty straightforward.
Or is the workflow really just setting up webpack to read the bootstrap assets from the bower directory, and then the bootstrap assets are just like any other scss and js assets that webpack uses?
Yes, exactly. Bootstrap for Sass is just some Sass and JS files, and Webpack handles these just fine.
I'm using WebPack in the context of Rails deployment. I'm guessing that gulp may not be necessary, but it could be used as part of the rails deployment to get the bower assets and as an easy way of running other tasks. Just not sure it's worth introducing an additional dependency to my Rails builds. This is what I'm doing: Fast Rich Client Rails Development With Webpack and the ES6 Transpiler.
On Rails, the asset pipeline plays the role that gulp does here. I'm on the phone, will have a look at your project once I get back.
Cool, I've read the article and looks like you've figured it out. Use bower/npm packages + webpack, and then compile webpack output with the asset pipeline for production.
This project additionally uses ExtractTextPlugin to output CSS to a .css file. It's experimental and a bit hacky, but I feel really weird about serving CSS packaged in a .js file, which is what webpack generates by default.
I just got the webpack to nicely use SASS with bootstrap: https://github.com/justin808/bootstrap-webpack-example and https://github.com/justin808/bootstrap-sass-webpack. And with that ExtractTextPlugin, not sure it makes sense to introduce Bower if npm can do the trick!
Great! We publish bootstrap-sass on both, so use whichever. Some things are only available on Bower though!
@glebm Any chance you might take a look at this PR: shakacode/bootstrap-sass-loader#2. I've gotten my loader to use the ExtractTextPlugin.
Additionally, do you have any information on the sourceMap option for sass? Does it work well for you? I have source maps turned on in Chrome for css, and I don't see anything when I run gulp dev. I do see that styles.js.map was created, but I'm not sure how this would get used.