Making Weird Grunting Noises with CakePHP 3 & Twitter Bootstrap

Written by James McDonald

June 18, 2016

This is how I got grunt running with the twbs/bootstrap plugin to automatically copy the CSS, JS and Fonts into my CakePHP 3 development environment.

I did this on MacBookPro OSX 10.11.5. But this applies to Linux too.

If anyone has better suggestions as to how this could be accomplished easier. I am open to them

# change to your home dir
cd ~/

# use composer to install cakephp3
composer create-project --prefer-dist cakephp/app c3twbs

# cd to your cake root:

cd c3twbs

# use composer again to install twitter bootstrap
composer require twbs/bootstrap

# change to the bootstrap dir
cd vendor/twbs/bootstrap

# install the local node components
# you need node.js to be able to run these commands
# google for how to install it. 
# hint: brew install node npm
npm install

# install the ruby gem because of the jekyll -v error
gem install jekyll

# run grunt and it will build all the bootstrap components and place them in 
# vendor/twbs/bootstrap/dist

You don’t want them to just be in c3twbs/vendor/twbs/bootstrap/dist you also want your files to be copied or compiled to c3twbs/webroot/{js|css|fonts}

So you need to modify your Gruntfile.js to do this. I have added some new commands with a _cake suffix to do this:

 diff Gruntfile.orig Gruntfile.js 
>       core_cake: {
>       	src: '<%= concat.bootstrap.dest %>',
> 	dest: '../../../webroot/js/<%= %>.min.js'
> 	},
>       minifyCore_cake: {
>         src: 'dist/css/<%= %>.css',
>         dest: '../../../webroot/css/<%= %>.min.css'
>       },
>       minifyTheme_cake: {
>         src: 'dist/css/<%= %>-theme.css',
>         dest: '../../../webroot/css/<%= %>-theme.min.css'
>       },
>       fonts_cake: {
>       	expand: true,
> 	src: 'fonts/*',
> 	dest: '../../../webroot/'
>       },
<         tasks: 'less'
>         //tasks: 'less'
> 	tasks: 'dist'
<   grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
>   grunt.registerTask('dist-js', ['concat', 'uglify:core', 'uglify:core_cake', 'commonjs']);
<   grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme']);
>   grunt.registerTask('dist-css', ['less-compile', 'autoprefixer:core', 'autoprefixer:theme', 'csscomb:dist', 'cssmin:minifyCore', 'cssmin:minifyTheme',
> 		 'cssmin:minifyCore_cake', 'cssmin:minifyTheme_cake' 
> 		 ]);
<   grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
>   grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'copy:fonts_cake', 'dist-js']);

Here is a link to the complete Gruntfile.js Gruntfile

Now when you change to the twbs/bootstrap dir and run grunt watch and change a *.less file it will recompile all your stuff and plonk it in the correct c3twbs/webroot/ css js and fonts folders.

cd ~/c3twbs/vendor/twbs/bootstrap
grunt watch

Screen Shot 2016-06-18 at 12.20.30 PM

Be sure to include the correct bootstrap files into your view:

// src/Templates/Layout/default.ctp
<?php $this->Html->script([
            ], ['block' => 'end_script']); ?>

            // 'normalize', // already in bootstrap
            //'bootstrap-theme.min', // It's built but I don't use it. Should I?
        <?= $this->fetch('css') ?>


<!-- # content here # -->
        <?= $this->fetch('end_script'); ?>
        <?= $this->fetch('from_view'); ?>






Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Meraki Open Source Licenses

Until today I assumed that Meraki was built in-house with only closed source software. But having a look at the...


If you have Veeam backup failing with the Updating BCD failed with Cannot update SafeBoot flag and SentinelOne is...