Development + production workflow?

The CMS Questions
1

Hi guys,

I’m new to Kirby, and really liking it so far.

Just wondering if you guys split your development/production environments in anyway? For example I’m using grunt to concatenate css and js, as well as run a few other tasks for my build of the site, however it seems running this task last minute then changing the script reference in my footer from something like:

<?php echo js('bower_components/jquery/dist/jquery.js')?>
<?php echo js('bower_components/jquery-ui/dist/jquery-ui.js')?>
<?php echo js('assets/js/slideshow.js')?>

to:

<?php echo js('js/scripts.js')?>

Isn’t the smartest way of doing things? I guess I could use only the built script in my footer during development, and then run a PHP sever with grunt, but this feels a bit…wrong? (especially for debugging etc.)

I hope this is clear. Cheers

2

You could use one config file per host, which would contain something like this:

c::set('scripts', array(
  'bower_components/jquery/dist/jquery.js',
  'bower_components/jquery-ui/dist/jquery-ui.js',
  'assets/js/slideshow.js'
));

or this:

c::set('scripts', 'js/scripts.js');

respectively.

In your footer, you can then use:

<?php echo js(c::get('scripts')); ?>

This will dynamically load the correct files.

4 Likes
3

Thanks, I’ll give that a go

4

For what it’s worth (and for anyone else’s future reference), I just use laravel-elixir for all front-end stuff. There’s not much fiddling you’ll have to do to get it working. There are a few things that I couldn’t get working (like BrowserSync), but not a big deal.

I link to the same files in dev as production. But when building for production, I just run gulp --production and the lib will minify, compress, etc. Then I push those up to the server.

This way I don’t have to mess with <link> hrefs or edit any configs for the sake of FE asset paths.

https://laravel.com/docs/5.2/elixir
https://www.npmjs.com/package/laravel-elixir

5

Hi, is there some solution for minify, concat and uglify this scripts for final page?

Thanks

6

There are several such solutions such as Gulp and Grunt. :slight_smile:
If you don’t like configuring and running the code from the terminal, there are also GUI tools like CodeKit and Prepros.

7

I use grunt, but I looking for solution, which do this for and I also cen debug page within same code, if you understand what I mean :slight_smile: Now I must build everytime, when I make some change…

8

Task runners support so-called “watch tasks” that will run your build process every time you change a CSS or JS file. grunt-contrib-watch is the one for Grunt.

9

If I use build everytime when I chenge something it’s time consuming.
I looking for something like this Wordpress plugin: https://wordpress.org/plugins/bwp-minify/ which do this when page is loaded and save this final file to cache…

Sorry for english

10

I use Gulp for my projects, but it should be similar for Grunt: If you use watch, rebuilding should take way less than a second (or even less than 200 ms) after saving in your editor. Watch works automatically, so you don’t need to manually run a task.

Building CSS in a CMS plugin isn’t useful at all as it doesn’t change on the final public site. You build it once, upload it and you are done. Those plugins actually perform worse than building before uploading.

11

Maybe use different array for devel and production, like you mentioned above? https://getkirby.com/docs/developer-guide/configuration/options#multienvironment-setup

12

You watch and minify, contat and uglify all js files everytime when you make change in app file?

13

I don’t uglify the JS code. I only combine the different files. Minification is only required for production.

14

Finally I use grunt for minify, uglify anf concating and diferent config for development and production.
For development I use something like this:

c::set('scripts', array(
  'bower_components/jquery/dist/jquery.js',
  'bower_components/jquery-ui/dist/jquery-ui.js',
  'assets/js/slideshow.js'
));

and for production this:

c::set('scripts', 'js/scripts.min.js');

This solve my problem :slight_smile: thanks

15

I read your first suggestion secondly, sorry for all my questions :slight_smile: