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…