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
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