codekit like features : frameworks and @import for js

[bachy]

hello,

thank you for your work Oklai ! i just switched from osx to linux as main dev environement and koala "saved" my life !

in osx i was working with codekit, and i miss some features from it ;) the first is the concept of frameworks that doesn't exists with koala. Fortunately i found the include_paths property for less. But frameworks as bootstrap don't have less files only but also js. So the second feature i miss is the @import for js files more generally it could be use full to be able to compile/minify also js files, not only coffee

i wich i could be able to help you !

[bachy]

sorry parts of my issue are dup with https://github.com/oklai/koala/issues/55 didn't see it before :P

[oklai]

If you can, welcome to join to develop Koala. If you are interested, please check out this branch https://github.com/oklai/koala/tree/concept. I also don't understand what is the function of frameworks, can you describe it. And I found bootstrap less file here https://github.com/twbs/bootstrap/tree/master/less, are these you are looking for? We are developing the compiler modular functions, it will be easy to add a new comipiler of some language(such as jade, haml, stylus), and the minify and concat js/css function has been in the development plan.

Cheers.

[bachy]

hi,

unfortunately i am just a web designer/dev, i don't think a i am able to help on this project.

here is the framworke description from codekit : "Keep just one copy of a file on your drive and easily use it across many projects without worrying about file paths. No more copying files into every new site."

[oklai]

I understand, you can use the project settings function of Koala, docs: https://github.com/oklai/koala/wiki/Using-project-settings. It allows you to specify the import include paths.

[bachy]

yes i'm already doing that, it could be great if we could do the same with js files : import functionality (for helpers function) and include_path in project settings. Also, the include_path could be added to ~/.koala folder once for all.

[oklai]

Yes, once for all is a great idea, I will add a global include paths option in settings window, it will be applied to each project.

[zaygraveyard]

:+1:

[bachy]

nice !

[bachy]

should i create an other issue for the import functionality for js files ?

[zaygraveyard]

Hi @bachy, do you prefer to import js files using @import or CodeKit's @codekit-prepend and @codekit-append?

[bachy]

i used to think that i would prefer //@codekit-prepend and //@codekit-append as i can keep compatibility with my collegues working with kodekit but these names //@codekit-preppend and //@codekit-append are not really generic. the best may be to use //@koala-append, as we can put the two lines together and codekit will simply ignore the //@koala-append statement, and koala will ignore the //@codekit-append statement. or it could be something else, it's open ...

[zaygraveyard]

I see, so you don't like @import. And do you use @codekit-append or just @codekit-prepend?

[zaygraveyard]

for now it will be //@koala-append "path/to/file.js"; and //@koala-prepend "path/to/file.js"; much like CodeKit, unless @oklai has any suggestions.

[bachy]

ok great ! i'm really happy with that, thank you :) it's not that i don't like @import, i think it could be confusing.

[zaygraveyard]

And @bachy Koala is like Brackets, built with the web for the web, so if you know JavaScript, CSS, HTML, graphics creation, node.js, jade, and/or multiple languages, you can contribute to this project.

So what do you say give it a try?

[bachy]

@zaygraveyard ha ha ! i know js css html and graphics, but never try node.js, and don't know jade, i'll check these two. i know english and i am french :) yes it could be cool to contribute to koala !

[zaygraveyard]

@bachy, I'm glad you feel this way :), and if you need any help let us know.

Cheers

[oklai]

Hi @bachy ,

If you are interested, you can join and welcome. I'm not good at English and I don't know graphics, and Koala is built with web technologies, so if you join, you can help us.

[oklai]

Guys, I have another idea, how about just use one import rule, @koala-include or @koala-import. Single rule easier to use, and is easier to maintain the javascript code. You can see LESS, Sass, CSS, or Server-side language php, they are all only has one rule.

[zaygraveyard]

@oklai, the creator of CodeKit explains his reasoning in this video, and if @bachy agrees with your idea, I will not oppose.

Cheers

[bachy]

Hi, Prepend and append allow to "copy/past" some extra code from external file only at the begining or at the end of the current file (like helpers functions or libraries). So i think that the real question is : do we need to import some code in the middle of the current code ? Maybe but a it's not a usual practice with js, is it ? I think the prepend and append are safer than include/import (at any place).

[oklai]

I dont like import code in the middle of the current code too, I misunderstood thought codekit allowed to insert the code in any place. So we can only match the import file in file head.

[bachy]

Codekit allows to import at the beging of the file (with //@codekit-prepend) OR at the end (with //@codekit-append) but actualy i can't remember if i already use the append one ... We should keep the two options, just like jquery $.prepend() and $.append(). Is it realy more work ?

[zaygraveyard]

Hi guys, Sorry for the delay but I'm having some computer crises (my computer isn't turning on) I finished the import feature it works similarly to php's include_once in the sense that the file gets imported only the first time Example:

File a.js:

//@koala-prepend "b"
//@koala-append "c"
console.log('a');

File b.js:

//@koala-prepend "c"
console.log('b');

File c.js:

console.log('c');

Minify a.js --> a.min.js:

console.log('c'),console.log('b'),console.log('a');

What do you think?

[bachy]

great ! carefull it's prepEnd and appEnd. is it possible to have a minification which keep the lines return (for debuging purpose ) ?

[oklai]

include_once is nice!

[zaygraveyard]

@bachy, you are correct about the typo, I fixed it (it was only in the comment, not in the code). And about the debug info, UglifyJS can generate a source map, will it help? You see the UglifyJS2 for full documentation about what it can do. I just go through the js files and collect the all required file, put them in order and hand them to UglifyJS.

[bachy]

hello, thanks again for koala, i'm using it every days ! mabe i missed something : in koala-config.json i can give the path to "frame works" with "include_paths" propertie, and it works with @import for less. But it does'nt work for js @koala-prepend or @koala-append, is it ? i really misse it.

cheers

[zaygraveyard]

Hi @bachy, thanks for letting us know of this bug. this should fix it 132a447. it will be awesome if you can try this fix, and let us know if it works.

cheers

[jsoucheray]

New to Koala, love it. One question that I cannot find answers for. Using the @koala-prepend syntax how do I prepend multiple files. In codekit it was done as such: @codekit-prepend "a.js", "b.js"... Is there a syntax for this?

[zaygraveyard]

The append/prepend multiple files syntax is discussed in #196.

[ardalann]

Thank you for your great work! I'm having just one issue. I want to wrap all my JS codes with

jQuery( document ).ready(function( $ ) { 
    ... 
});

(I don't think I need to explain why...) Since there is no "@import" for JS, I created _prepend.js with

jQuery( document ).ready(function( $ ) { 

and _append.js with

});

and my main JS file is something like

// @koala-prepend "_prepend.js"
// @koala-prepend "_file1.js"
...
// @koala-prepend "_filen.js"
// @koala-append  "_append.js"

It works well, as long as I don't check the "Compress" checkbox! If I try to compress it, it gives me this error:

Unexpected token: eof (undefined)

Could you please either fix this, or add "@import"?

Much appreciated! Thanks!