How to automate javascript version increment if file changed? - javascript

I'm using grunt to build a javascript/angularjs project in the following order:
clean copy > uglify > cssmin.
Now if I change a js file I'd always have to manually add a version increment at the end of the script tag, so that the browser can detect the changes.
<script src="/js/myscript?v123"></script>
Question: how can I automate this process using grunt? If I run the "grunt" command, only files that changed compared to the last run should get a version increment. So that the browser can reuse the cached files as much as possible.

I know short answers are not OK (not enough rep to comment), but you might want to checkout grunt-asset-cachebuster. I haven't tried it myself but there are plenty of examples in their npm page.
Also checkout this answer about grunt-newer

Related

Least amount of hassle when enabling inline javascript?

So I'm currently trying to run a react/react-redux/bootstrap web application template using react-app-rewired. To be specific, I run npm start, which runs react-app-rewired start via the predefined start script in my package.json file. The only error that's getting thrown is that in one of the .less files, there is some inline javascript. I'm ok with just allowing that to get through, because I'm sure there's also inline javascript in some of these other files, and having to fix every file this applies to would be a pain. I did some research, and the main way I see people accomplish this is by setting up gulp or webpack to pass enableJavascript as an option. Is there a way to enable inline javascript from the command line, and not take all that time setting up webpack or gulp on a premade program?
If there isn't, what is the way to accomplish this that comes with the least amount of headaches?
Thanks in advance for your help

How to execute files directly from Notepad++

For the past few weeks, I have been working with Node JS a lot, and i have found it pretty annoying to have to execute the file through cmd every time i want to test.
To make my life easier, I have made a batch file that executes my file for me. My question is how do I execute files directly from notepad++?
Is there a menu for it? Currently on my left I have a menu that lets me navigate between my files easily. On my right, I have a NppFTP UI that lets me connect to the FTP server, if I need to work on files that are not on my system.
I highly suspect that there is a way to execute files directly from Notepad++.
Although my answer doesn't directly answer your question, it will resolve the problem you were facing in the first place.
There is something called nodemon which will restart your node process as soon as you save your changes. It's very simple to use:
To install :
npm install -g nodemon
To use:
nodemon app.js
or Just [it automatically grabs the default app.js file or other]
nodemon
You can learn more about this here:
http://nodemon.io/

Using coffeescript with nodemon

Currently i discover that i can use nodemon with coffeescript, without needing to generate the .JS files, searching about i discovery that forever can do the same.
I wonder if use in production will lead to performace issues. I do not think so, since the Nodemon and Forever generate the javascript files in the dark just one time, when the server starts, then is not needed to generate these javascript files to each user request, correct?
Thank you.
That is correct, but in a production environment you would not use nodemon because your source code (for your currently deployed version) is not supposed to change. Forever would be more appropriate in this game.

VSCode intelliSense autocomplete for javascript

I would like Visual Studio Code to autocomplete all words within the open document instead of the just the scope specific variables it finds. What should I change in the settings?
edit: code version 0.3.0 at time of question.
I just figured it out. This will use all words on the page for auto complete.
// Always include all words from the current document.
"javascript.suggest.alwaysAllWords": true,
// Complete functions with their parameter signature.
"javascript.suggest.completeFunctionCalls": true,
Even though it has been quite some time for this question, I thought I might be of help to anyone else who bumbles across the same question.
So here goes . And this is for the latest version of VS Code as of writing.
For a true intellisense, i.e. for example you intend to get all the methods related to "console" as soon as you press '.' , you can use the respective Typescript definition file.
Now I agree that this fix is targeted at node,and needs the same along with npm on your system. But still, works for all Major JavaScript work you might run across.
on Linux, for this, you'd need "npm" and install TypeScript Definition Manager (tsd) globally.
npm install -g tsd
then within your current project directory (or by changing to the project directory) , open a terminal window and add the following lines
tsd query node --action install
tsd query express --action install
then, as soon as you'll open your .js file in the current directory, you'll get proper autocomplete / intellisense for all DOM object and other possible stuff.
It worked for me, and this is the only reason I use VSCode on linux (for JavaScript at least, even though I like LightTable too)
for further information (and clarifications if I somehow couldnt manage to be clear enough) visit the following link:
Node.js applications on VS Code

xcode 4 + phonegap ... not update JS upon build?

I've run into a weird issue that has had me scratching my head for the past hour.
I'm working on an iPad app using Xcode 4 and PhoneGap. It's using jQuery. I've put all my JS into a scripts.js file.
Things are working well.
I spend about an hour doing a lot of CSS tweaking. I'd update the CSS file, stop the app, rebuild, and push to the iPad simulator or my iPad. That's been working fine. Every update to the CSS file is reflected on the new build.
I then needed to update the JS file. I couldn't get things to work and then I finally realized none of my JS changes were actually be put into the build. I finally blanked out my JS file completely, rebuilt, and it's still not updating.
The file I'm updated is being updated in the finder in the project folder (I can right-click 'view in finder' and that file is, indeed, updated).
So I'm stumped. Is the xcode compiler caching the JS file somehow instead of grabbing the updated file? Is there a way to force it to grab the updated JS?
I found it necessary to hold the Option button when clicking the menu command which turns the command from "Clean" to "Clean Build Folder..." and this caused my assets to be refreshed.
Well, after some more googling, this seems to be a common problem. Xcode seems to cache files even after you've edited them.
One option appears to be to run the 'clean' command before a new build. I tried that, no luck.
Other solutions appear to involve rebuilding the .plist file each time. I don't fully understand that (yet) in terms of how to do that automatically, but did find this workaround:
Open your .plist file
change something (in my case, I rename one of the app icon files each time)
save and build
Doing that magically forces xcode to FINALLY grab all the updated files and do a proper build.
I can't explain why Xcode seems perfectly happy grabbing my updated .css file each and every time but won't update the .html or or .js files without first doing this .plist file edit.
Seems as if Apple still has a few bugs to work out. I guess we'll have to wait patiently for the next 4gig .x relase of it. ;)
Just add a new "Run Script" build phase to your target in XCode and paste this :
touch -cm ${SRCROOT}/www
I do not have mac right now, but few things to try:
Try to look at Your project build (or prebuild or something) action where www folder is supposed to be copied.
Try to change index.html and see if it works.
Try to copy paste all Your javascript code to index.html script tag
Try to validate Your javascript (For example: Google Closure Compiler) and see if it has no problems
None of these worked for me :(
The only way I can get the thing to update its html and js is by running a "corodova run ios" at the command line.
Find the file called copy-www-build-step.sh.
Mine was in [project_folder]/platforms/ios/cordova/lib/copy-www-build-step.sh
In that file, find the lines beginning rsync -a "...
Add -c to the rsync lines, so they ready rsync -a -c "...
copy-www-build-step.sh is the script that copies the files over from www/ to where they go inside the app file. rsync is the unix file copying command they use. Without that -c, rsync just compares the file size on each file and folder and copies them over if the size has changed, and a couple of spaces or quotes don't count as enough of a change. With the -c, it checksums them and compares the checksums, which will catch even the smallest changes.
I think this will work best, because it's not a workaround, it actually fixes the cause of the problem.
I just had this issue, and the build phase command posted here (which is actually now used by the default Phonegap project) did not work for me, since I am editing my files on a Parallels Windows VM, in Visual Studio.
What I did, was use this instead, in the Build Phase of my project:
find "${PROJECT_DIR}/www/." -exec touch -cm {} \;
Thats basically a recursive touch. I then set up Visual Studio to always reload the file, if it has been saved. Hope this helps.
I'm not sure which did it, but I did the following:
Changed an icon value in my MyProject-Info.plist
Quit the simulator
Product -> (hold option) -> Clean Build Folder
Run
I had this same issue with the iOS Simulator, I tried most of the suggestions above with no success, it would not pick up my changes.
Later another possible solution occurred to me, which did work:
Delete the app from the simulator. (ie. Click and hold on the icon, then hit the X when it starts to shake, then Hardware Home)
Then re-run from xCode.
(NB: "cordova build ios" was also required)
Nothing solution of above work
finally i saw there are two index.html file and .js file in the project created using Command line tool of Cordova
So make changes as below shown under Staging folder

Categories