What's the best way to disable JavaScript minification in CodeKit? All those *-ck.js files it creates are making a mess of our repository's submodules.
Note that adding a rule to .gitignore doesn't work because its rules aren't inherited by submodules.
In CodeKit Preferences select Languages / JavaScript to edit the default settings for JavaScript handling. (These can be overridden for each file in a project.)
Change the setting for the second processing step (labelled "Then:") from "Concatenate + minifiy" to "Concatenate imported files". For any script file already in the project check whether it already has individual settings which still differ from this new default.
In this case, "*-ck.js"-files should only be created in case a source file imports another for concatenation but not for ordinary script files.
Alternatively you might specify a different output path for the generated ck-Files in CodeKit Preferences / JavaScript / Output Paths in order not to let the generated files clutter the source directory.
I believe the menu has been updated, but the answer from immo still stands. Under Javascript Language settings you can click a dropdown for output style and change it from minified to non-minified.
One workaround is to set the output path to something like codekit-ignore in Preferences > JavaScript > Output Paths, relative to the project's root folder.
Then add /codekit-ignore to .gitignore.
Easy to cleanup and feels better than find . -iregex '.*-ck\.js' -delete.
In the preferences see 'Skipped Items' under 'General' and add *.js to the list.
There are several ways to stop javascript minification in Code Kit but the easiest and simplest way to do so is simple to navigate to the javascript file you wish not to minify in the file view, and configure your Javascript Options to the right hand side.
This method provides benefits such as JSHint & JSLint without the minification and can be configured on a site by site, file by file basis giving you greater control.
Let me know if you have any further issues, i'd be happy to help.
Related
In CSS I know that I can reference/link to another file using either of the following:
photo.jpg or ./photo.jpg for a file in the same location as the one I am working in, and photo-folder/images/photo.jpg or ./photo-folder/images/photo.jpg to link a file in one or more directories below/inside the parent directory of the one I am working in.
I also know the same idea applies in HTML like ./[href] or [href].
But I am wondering, let's say the positions of the files in my example are reversed, that is, I want to link to a photo in a directory which is the direct/indirect parent of the file I'm working in. How would I call that file without using the full drive address such as C:/Users/Username/Code/etc/photo.jpg, while my working file is C:/Users/Username/Code/etc/code/file.css...
How is it done in these languages: HTML, CSS, JS, Python? (You are welcome to answer for other languages, I might need it later! :D)
Side question: is there any technical difference between ./file and file, and would it be preferable to stick to one format over the other (e.g. to prevent problems, for readability, etc)? Though I have never run into any problems using either, or even combining both in the same project...
To get to parent directory use ../, this is "per directory", so if you need access several levels up, you'd need use: ../../../ (for 3 levels)
As of using ./ for current directory - it's redundant
As far as I know this is pretty much applies to all languages, however in HTML/CSS there is another relative path that can be used to get to the root of the domain: / (no dots)
so for example if you open https://example/some/long/path/file.html and need access to file at http://example/file.jpg you simply put as relative path: /file.jpg
my current process is as follows:
Current process
I add the i18n attributes to the template.
Then I execute ng xi18n. This creates the messages.xlf file.
As soon as the process is finished, you have to copy messages.xlf and change the file extension to *.fr.xlf. In the renamed file you now manually search for all <source> tags and add the <target> tags with the translation.
If there are many different languages, this process is very time-consuming.
Problem
The problems here are the missing versioning of the translations and especially the manual adding of the <target> tags to the corresponding <source> tags.
Desired workflow
It would be desirable to have a workflow where versioning is possible and above all, the desired translation files are created automatically.
Would webpack be the right approach to solve this problem?
I just abandoned built in translation and prefered ngx-translate module.
With it you can :
- auto-extract translation string from source code
- build one app that contains all locales
- change locale during run time
If you're in an IDE that supports regex searches, then you can use regexes for search and replace such as
search: (\s*)<source>([^<]*)</source>
replace: $1\n$2<target>$3</target>
This will add a target after every source.
And about updating the translations, you are supposed to have a versioning tool, that will highlight the changes in the file. All you have to do is keep it updated at every commit you do that involves this file.
I agree that this isn't practical, and so is the fact that you can't translate typescript code. But those are workarounds that you can use in the meantime to ease your life.
I want to load a new version of my javascript,css,html etc.. every time i deploy my page. I saw that i could add ?<version> to the script's src link, Is there any other new/more reliable way of doing this?
UPDATE I'm looking for something like a variable that would allow me to update the URL automatically if a new file is loaded rather than me renaming the files manually. Is this possible?
I think that an elegant way is to use a gulpfile which rename your *.css and *.js filename to include a hash of file content at the end.
1) Gulp library : deal with filename
https://github.com/sindresorhus/gulp-rev
Example of what it does : transform filename unicorn.css into unicorn-d41d8cd98f.css
2) Gulp library : deal with index.html include
To inject css and js, you could use another gulp librairie :
https://www.npmjs.com/package/gulp-inject
This one allow you to include automatically css and js in your index.html using file directories.
3) What you have to do
All you have to do is to create a gulp task which use these two library. I swear it's not to hard. I don't have enough time to do a demonstration (I'll do it in the next few days).
This solution presents two advantage :
Only changed files are cache reloaded on the user side
You don't need to use an external js library inside your project,
which increase a risk of failure.
Add the resource's last-edited time to the src/href of the resource's element, or add an MD5 of all related times if you're linking to an aggregation script that might include sub-directories, etc.
http://verens.com/2008/04/09/javascript-cache-problem-solved/
https://developers.google.com/speed/pagespeed/module/
This link doesn't talk specifically about CSS and js auto versioning but I read somewhere that this module can be used for auto versioning of CSS and js files. Would like to confirm about this.
Please let me know if auto versioning is part of google's mod_pagespeed module and if it can be used with my Apache tomcat 8 server ?
Any references to the above functionality will be greatly appreciated.
I have done some testing and from what I can see, the answer is no, well at least no in the sense that it won't auto version immediately after a change.
For reference, I'm running Apache 2.4.10.
From my tests, I had 4 javascript files that I was monitoring, these files were being optimised by pagespeed and the resulting file had a hash of ...pagespeed.jc.bFZBaW2xkN.js.
Within this file, it also gives hashes for each file it combines.
var mod_pagespeed_64gxmrG5cP = ...
var mod_pagespeed_r8BXvaG1ZV = ...
var mod_pagespeed_86DySW9yKu = ...
var mod_pagespeed_FAqlx5ADkk = ...
I found that I would make changes to files but nothing would change until I did a hard refresh (using Chrome).
When hard refreshing, I noticed the main file name ...pagespeed.jc.bFZBaW2xkN.js hash would update and looking within the file showed the change but that the inner hashes that represented the combined file were still the same.
I ended up implementing my own auto versioning in a php function that just appends the file modified time to the end of the file as a query eg. somejavascriptfile.js?v=0123456789
Now if I touch the file, the main combined file updates its hash but the inner hashes also update.
Hope this helps anyone else out there wondering the same thing.
I moved the jQuery in my project over to Microsoft's CDN yesterday so finally have jQuery intellisense back. Yay! However, I apparently need to include the following in all my .js files:
//These references should enable intellisense within this file
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" />
///<reference path="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js" />
I would prefer to have a single js file which contains the above references such that I have a single, unchanging reference in all my js files like so:
//These references should enable intellisense within this file
///<reference path="/shared/js/stdafx.js" />
The idea is that stdafx.js would be the file containing the jQuery references. Then I have only one place to update the versions or add additional references. I gave it a quick go, but it didn't seem to work. Can anyone figure out a way to make this happen?
Actually the above common reference did work in the end. I didn't realize how quirky VS was in regards to js intellisense. Funny enough it kicked in after compiling the project.
I did try Ctrl-Shift-J which refreshes the JavaScript as well. It takes a few seconds for it to kick in so give it a chance. Another tip I read was dragging the common.js file into the editor of the .js file I wanted to add the common reference to. This sanity check ensured I had the correct path (it did). It added a relative path (../shared/stdafx.js) but I was able to use an absolute path (/shared/js/stdafx.js) which means I can modify the VS .js template for new js files.
So I would suggest anyone who comes across this question to persevere, refresh the JavaScript, compile, even close and reopen VS as it will hopefully kick in for you eventually.
For anyone still wanting jQuery intellisense in their .js files (and why wouldn't you) you need to 'reference' the correct jQuery VSDOC file, that MS created for Visual Studio intellisense:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2-vsdoc.js" />
To test it, type:
$(
You should see full intellisense with PARAMETERS, as well as members. If you only see a single list of members, it's not working.