Copying references from index.html into karma.conf.js automatically - javascript

I'm trying to generate a karma.conf.js for my testing.
My app has already aout 30 tags in it referencing my code. I'm writing my AngularJS code in a modulized structure, like it is recommended here.
I wonder how to not write all the refereneces into the karma.conf.js again.. Does anybody know a solution for this?
I looked at https://preview.npmjs.com/package/karma-loadscripts-preprocessor but it didn't do the job. Seems to be for loading external scripts from cdn-sources.
I'm a bit stuck and right before writing my own shell script wich does the job for me.

In my experience this is not a big problem in angular projects. The included files do not change too often and they are manually manageable. It also happens sometimes to have different includes in the Karma file, because you may want to mock some modules.
If you are really committed to be dry on this, and you are using the angular generator in Yeoman, a solution could be to include the built version of your app in Karma

In your karma.conf.js file you can reference multiple files in a directory or in subdirectories. For the files property in your karma.conf you can do similar to below.
files: [
'www/js/*.js',
'www/**/*.js'
]
The first show will get all in the in the js folder. However the second will get you all the javascript files in the www/ folder and subfolders including the js/ folder.
Hope this helps.

I ran into the same challange as you did. I don't want to manually include every script I use in my app into the karma config but I do want to test the unbundled javascripts.
I have created a karma preprocessor myself to include all the local script from a html file. It works for my own projects, I hope it does for yours as well.
https://www.npmjs.com/package/karma-preprocessor-includelocalscripts
Have a look at it and feel free to comment.

Related

Symfony 3.3 - where should I put CSS and JS files?

THIS link suggests that /app directory contains all configuration, templates (.html.twig files) and translations, and the /src directory contains PHP code.
However, HERE we can see that .css and .js files are loaded from /src/AppBundle/Resources/public directory and not /app/Resources/public directory. What is the best practice? How should I professionaly approach this problem, and where should I keep all the templates, .js and .css files?
I like to put css and javascript that serve for general purposes in /app/Resources/public and the ones specific to the concerned bundle in /src/YourBundleNameBundle/Resources/public. Like that when I want to see a code specific for a bundle I will just go to that bundle , when it's a general purpose code I would be sure that it's in the root. I have seen expert people doing it and it makes sense for me.
It's a matter of choice and there is no right and wrong answer.
the best practice is to put your css and js files in your bundle particularly in folder that you called "public" (yourBundle/Ressources/public/css/yourStyle.css)
and make sure to run this command before
php bin/console assets:install
and To avoid typing this command each time, I recommend you make a link (a kind of shortcut), by adding the active parameter:
assets:install --symlink
So, the web /bundles/folderBundle actually points to src/yourBundle/Resources/public
On Windows, you must run the command prompt in administrator mode

Webpack 2: Watch external files

I have a project that uses source files external to the project. Effectively, there is the actual project source code (an Typescript/Angular 2 application, lets call it the 'core' stuff), and this is a generic web application that is meant to be the base code that consumes these external source files.
The external files include additional stuff-- that could be SCSS files, images, evn additional JS. The way I want this to work is that webpack copies these external files from any source directory (this is critical, it is not part of the core project) to a local .tmp directory. The files in the .tmp directory are worked on along with the core src files to generate the prod output.
I can't figure out how to add these additional external source files to the watch list. Effectively what I'm looking to do is watch that directory and as things change, it re-copies the affected files to the local .tmp directory and triggers a recompile.
Presently I have to restart webpack and have a very very ugly solution using Grunt to watch the additional files. It's nasty but these kinds of workarounds have historically been what I've had to do with webpack.
Does anyone have a better solution? Ideally I'd like to not have to mix grunt with webpack. Webpack should be able to do this, but its hard to know whether there's an existing plugin for this or what the best approach would be.
Also, please spare the "look for it on google" or "read the docs" comments. I've combed through it all, hard, and have not found anything.
Thanks in advance.
As of now Webpack doesn't watch external files out-of-the-box . You need a plugin for that.
Basically idea is to have a file watcher module chokidar / watch , listening to the file change , and when there is a change, restart the webpack compilation phase . Webpack plugins can access the compilation object and we you need to hook it to a compiler phase i.e. 'emit' , 'after-emit' etc.
This Webpack plugin exactly solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .

Website with node - couple of questions about browserify or webpack

I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.

VS 2015- typescript does not generate javascript files

I just installed VS 2015 Community.
After building no js files are created inside the solution or the explorer.
TypeScript is part of Community. The produced .js files aren't part of the project, so you won't see them unless you turn on 'show all files' from the solution explorer. Here is the button you need to press:
Then the .js files will appear after you build:
If you're not seeing these, then check to make sure you're using this project template:
I want to thanks all who tryied to help But the solution in cordova typescript project - The compiled .ts files are inside the www\scripts\appBundle.js.
*you may need to use #Micheal Braude solution to see the appBundle.js file.
thanks agian.
I`m not sure that VS 2015 Enterprise works like Community version, but I tried to explain you, how to create Simple TypeScript project, and configure it for using step by step.
Steps
Create new HTML Application, developed for TypeScript.
When you have done it, you would get something like on image below:
It is a simple structure of application, here we have file app.ts, html view, and css style-sheet.
Configure compilation - What you should to know about this step:
ES target version
Compile single merged file or separate files.
Enter project configurations -->> Open TypeScripts Compilation tab -->>
Choose required ES version in ComboBox -->> Write path to compiled file and it name, if needed (located slightly below).
Add your first file to solution and write some code in it
Create your file.
4.1. If you prefer separate compilation then you should add dependency for your js file into html view. Usually, the *.js file compiled in the same location folder of *.ts file, that`s why targeting on you ts file when write dependency to js file
4.2. If you prefer merged compilation, first that you need - it is configure order of file, it is very simple challenge:
Add into the main file (in my case usually it is app.ts) and write in it list of your dependencies
///<reference path="path/to/file1.ts"/>
///<reference path="path/to/file2.ts"/>
Than, you should replace in html view this default script path:
with path to your final js file
Test your application:
try to add some code that would help you to be ensure that your code works perfectly
run you application and ensure that it works as you expected.
Good Luck! I hope that this post helps you in your beginnings!!
P.S. Here working project.

Adding javascript files to Yeoman webapp generated website

I am playing with the yoman trying to build a web site using the webapp generator.
If Managed to create a web site that works under grunt server, when I change a js file grunt notices the change change and does a live load and everything works as you would expect.
When I try a plan grunt, it attempts to run the dist task, it manages to include my html files, but skips any of the javascript or script files I created in the script and styles diretores. I assume its the case I have to tell grunt to includes these files
Files such as main.js seem to make it through, but there are no references to main.js in the Gruntfile, so I not sure which part of Gruntfile.js to change.
Doing a yo doctor reports
[Yeoman Doctor] Everything looks all right!
Q. How to do I tell grunt to include and user created files.
Q. I noticed that all my image files where renamed, fair enough how do I refer to a file that I known is going to be renamed in a javascript file
Q. Does anybody known a good web resource for yoman where these quesion might have already been answered?
Be careful on this glob pattern scripts/{,*}/*.js. This takes only the js files that are inside scripts or immediate child folders.
Make sure to change it to scripts/**/*.js to include all js files in all subfolders.
Also get an idea on tags build: css, build: js in your index.html, wiredep plugin used by Yeoman in gruntfile to understand what files will be injected into dist folder.

Categories