Nette and Grunt task grunt-usemin for min. css and js files

chemix

Hi, i update my example repository https://github.com/…/Nette-Grunt where is basic config for combine Nette and Grunt.

I'm using these blocks in @layout.latte template:

<!-- build:js {$basePath}/js/app.min.js -->
<script src="{$basePath}/js/netteForms.js"></script>
<script src="{$basePath}/js/helpers.js"></script>
<script src="{$basePath}/js/lightbox.js"></script>
<!-- endbuild -->

for automated building minified js and css with Grunt

srigi

Well, how did you manage usemin-ing of HTML with {$basePath} in front of path? grunt-usemin is not updating this script tags, cos it is unable to find file with that name on the disk.

Recently I also finished boilerplate of Nette & Grunt integration. I solved lots of things there including the above one (by forking usemin). Unfortunately it is not OSS yet (will be probably), but if you ask I can share important pieces.

chemix

i wrote little npm module grunt-nette-basepath that solve problem with {$basePath} string in paths https://github.com/…tte-basepath

David Grudl

Great! Whould you like to write a short article on nette blog?

chemix

This is ENGLISH/CZECH draft, is it ok?

https://docs.google.com/…RNt8SLM/edit?…

comments are welcome…

Last edited by chemix (2014-03-26 11:29)

Patrik Votoček

<OT>Just question. Why do you write this short post about czech “article” on english forum?</OT>

chemix

Sorry for that, but it's quick reaction to David's question. I will write en version soon.

o5

I just want to suggest a great task called grunt-watch. It should be added to your grunt/nette skeleton for others, who don't know it. I discovered development with grunt-watch + livereload a few weeks ago and now I don't want to change :)

chemix

done, ENGLISH draft is ready for corrections and suggestions

https://docs.google.com/…RNt8SLM/edit?…

chemix

o5:
More tips how to live better life with grunt maybe will come ;-)

Quinix

Thank you for the tutorial, it worked like a charm :-)

But I have one problem… is there some way, how to replace relative paths to images etc. in minified css files?

Patrik Votoček

Please send Pull Req. to https://github.com/…ette.org/pla

chemix

PV: sended (https://github.com/…docs/pull/94)

Q: i used the same (and one) folder for all css files like for minified version and i don't have this problem. But if you need something special try add other plugin http://gruntjs.com/plugins for example: https://www.npmjs.org/…-url-replace maybe solve your problem or use data-uri https://www.npmjs.org/…unt-data-uri

this article is only for start :) i'm using too more plugins

chemix

Article on pla.nette https://pla.nette.org/…-with-usemin