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
grunt

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 
138a139,142
>       core_cake: {
>       	src: '<%= concat.bootstrap.dest %>',
> 	dest: '../../../webroot/js/<%= pkg.name %>.min.js'
> 	},
236a241,248
>       minifyCore_cake: {
>         src: 'dist/css/<%= pkg.name %>.css',
>         dest: '../../../webroot/css/<%= pkg.name %>.min.css'
>       },
>       minifyTheme_cake: {
>         src: 'dist/css/<%= pkg.name %>-theme.css',
>         dest: '../../../webroot/css/<%= pkg.name %>-theme.min.css'
>       },
282a295,299
>       fonts_cake: {
>       	expand: true,
> 	src: 'fonts/*',
> 	dest: '../../../webroot/'
>       },
371c388,389
<         tasks: 'less'
---
>         //tasks: 'less'
> 	tasks: 'dist'
476c494
<   grunt.registerTask('dist-js', ['concat', 'uglify:core', 'commonjs']);
---
>   grunt.registerTask('dist-js', ['concat', 'uglify:core', 'uglify:core_cake', 'commonjs']);
480c498,500
<   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' 
> 		 ]);
483c503
<   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
<html>
<head>
<?php $this->Html->script([
            'vendor/jquery-1.12.0.min',
            'plugins', 
            'main', 
            'bootstrap.min'
            ], ['block' => 'end_script']); ?>

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

</head>

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

Refs:
http://gruntjs.com/getting-started
http://getbootstrap.com/getting-started/
https://getcomposer.org/

 

 

 

0 Comments

Submit a Comment

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

You May Also Like…

How to Research a CPU Upgrade

How to Research a CPU Upgrade

Upgrade Time! Doing a lot of VMWare Workstation virtualization to create labs for self-study and training. Finding...