Well this was fun. Trying to get a project started up using Electron that includes jQuery & Bootstrap. Mashing things together so they all work required a bit of jiggery-pokery using NPM, Bower and Gulp.
As I wanted to get all of the components together to run a self contained desktop experience I needed local copies of Bootstrap and JQuery. Seems you can do this just by using
npm install jquery bootstrap-sass@3 jquery@1 --save-dev and it all gets installed under the
Now I’m using the bootstrap-sass package because by using Gulp I can compile the sass to css. So when I get around to making my own css I can use sass and relate it to styles/style variable already defined for Bootstrap.
Taking the cue from the previous Gulp article I created a
The items of note are the tasks for ‘sass’ and ‘scripts’. I’ve added arrays containing the files and paths I want Gulp to process. For the ‘scripts’ task it grabs the jquery.js, bootstrap.js from the bower_components folders and along with any of my scripts in js/*.js merges them into one minified file in
dist/js/all.min.js so one simple “script” tag is all that’s required:
Turns out you can’t use the JQuery that ships with node. It’s installs version 3.1.1 which is not supported by Bootstrap 3.3.7. So stick with JQuery 1.12.4.
There is one more quirk with this setup. The Bootstrap scss file is actually named _bootstrap.scss when it is downloaded. The sass compilation does nothing because the file begins with an underscore. So to make it work you must rename it without the underscore.
Then I came across this gem: http://www.codingpedia.org/ama/how-to-use-gulp-to-generate-css-from-sass-scss/
So took my sass task a step further and made it clean/minify the css. The module
gulp-minify-css has been superceded by
npm install --save-dev gulp-autoprefixer gulp-clean-css
Then edited the
gulpfile.js to add in the plugins at the top and modify the sass script to suit.