Shortcut to getting grunt-bower-concat to compile bootstrap css all proper like with gruntfile.js example
Gotta cut this one short. If you are reading this, it is highly likely you have already be down some rabbit holes of nerd-tennis/back-and-forth about what is causing the issue – but you just need a fix, here is how and be sure to pass it on if it works for you – progress is slow enough:
Terminal:
npm init
npm install grunt --save-dev (for workflow processing)
Install additional grunt plugins:
npm install grunt-contrib-concat
npm install grunt-contrib-watch
npm install grunt-contrib-connect
Setup gruntfile.js
bower init (conveniently has the same commands as npm)
Install additional bower plugins:
bower install --save jquery
bower install --save bootstrap-css (this includes bootstrap.js)
Install wiredep to manage bower dependency files:
npm install --save-dev grunt-wiredep
Create wiredep task in gruntfile.js
Install grunt-bower-concat
Create bower_concat task in gruntfile.js – pay close attention to the structure
bower_concat: {
all: {
dest: {
js: ‘builds/development/js/_bower.js’,
css: ‘builds/development/css/_bower.css
}
}
}
gruntfile.js example:
module.exports = function(grunt) { grunt.initConfig({
concat: { options : { separator: '\n\n//----------------------------------\n', banner: '\n\n//----------------------------------\n' }, dist: { src: ['components/scripts/**/*.js'], dest: 'builds/development/js/script.js' } },
bower_concat: { all: { dest: { js: 'builds/development/js/_bower.js', css: 'builds/development/css/_bower.css' }, dependencies: { ’bootstrap’: ‘jquery’ //get jQ to go along with the build } } },
wiredep: { task: { src: 'builds/development/**/*.html' } },
connect: { server: { options: { hostname: 'localhost', port: 3000, base: 'builds/development/', livereload: true } } },
watch: { options: { spawn: false, livereload: true }, scripts: { files: ['builds/development/**/*.html', 'components/scripts/**/*.js', 'components/styles/**/*.css'], tasks: ['concat'] } }
}); //initConfig
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-wiredep'); grunt.loadNpmTasks('grunt-bower-concat');
grunt.registerTask('default', ['wiredep', 'bower_concat', 'concat', 'connect', 'watch']);
}; //wrapper func
If this worked for you, holla but more importantly share it, tweet it, blog it, use it. √