Use h5bp / ant-build-script to remove debug output - ant

In the ant-build-script docs, it says I can mark my scripts with comments to state which Javascript files to minify & concat.
<-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script> <cript
src="js/main.js"></script> <-- end scripts -->
Is there a way I can use a similar approach to disable debug output, or remove specific lines in any files (Javascript, PHP, etc.)
An example of what I'm trying to accomplish:
<!-- Remove these lines --> console.log("Starting test");
console.log("Test 2"); <-- end remove these lines -->
Also, using that same example, if it could replace a line. An example of that is if I wanted it to change a variable from a local test directory to a remote production directory.
I hope that make sense and I appreciate any help.
Thanks!

If you are trying to remove lines of Javascript using the h5bp default Google Closure Compiler I suggest looking at #define JSDoc Tag
/** #define {boolean} */
var DEBUG = true;
Then, in your project.properties file look for: # Closure Compiler Options and set: tool.closure.opts = --define DEBUG=false
Finally, wrap any code you want ignored, in production, in a conditional:
if (!DEBUG) {
console.log("Starting test");
console.log("Test 2");
}
The #define JSDoc Tag will help with your second question also.
/**
* #define {string}
*/
var AJAX_URL = 'http://localhost/';
console.log(AJAX_URL);
with the compilations options: --compilation_level ADVANCED_OPTIMIZATIONS --define AJAX_URL=\'http://example.com/\' (Note: you made need to fiddle with the quote escaping, depending on your platform) the resulting code is:
console.log("http://example.com/");
There are many ways to go about this of course, see:
http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
http://dailyjs.com/2012/02/02/console/
https://developers.google.com/closure/compiler/docs/js-for-compiler?hl=en

Related

How to delete part of a URL using Greasemonkey?

I'm trying to make a Greasemonkey script that passes me from this:
http://redirector/referal_ID:site#link
to this:
link
In other words, I need to delete the first part of the links that I click on, bypassing the redirector pages http://redirector/referal_ID:site# and keep only what is after the # character the link.
Note that redirector changes frequently, referal_id is always unique and different, and site# is the only constant string in all of the links.
I've tried to modify various scripts but my, next to null, knowledge of javascript foils all my attempts.
--------------------------------------------------------------------EDIT-----------------------------------------------------------------------
An example of what I need to do is to modify this:
http://firstfirst.net/identi_ref?q=Waterfox%2033.0.2%20[Mozilla%20Firefox%20de%2064%20bits]&ref=http://www.identi.li/c#https://shared.com/dhq1l9djj1?s=l
into this:
https://shared.com/dhq1l9djj1?s=l
The site where I want the script to work is http://www.identi.li/
The trickiest part of this is making sure the script does not fire on pages that are not redirectors. To do that, use a regex #include.
After that, it's just a matter of extracting the target site and changing the location. Here's a complete script:
// ==UserScript==
// #name _Skip redirects
// #include /site#http/
// #run-at document-start
// ==/UserScript==
var targetSite = location.href.replace (/^.+?site#(http.+)$/, "$1");
//--- Use assign() for debug or replace() to keep the browser history clean.
location.assign (targetSite);
//location.replace (targetSite);
Note that the #run-at document-start is not strictly necessary, but it can shave the response time, of a redirect script, by a fair amount.

Is it possible to change a karma coverage report title?

I'm working on an application who has two sides; a desktop and a mobile. In order to test that everything work's fine, we wrote some unit tests, and setup a karma-coverage.
I already have two config file, the first one is for mobile, the second one for desktop, and it generate two distinct coverage reports.
What I need, is to change the default report title. Actually, this is "Code coverage report for All files". I want to set it up to "Code coverage report for All files - Smartphone|Desktop".
Anyone knows if there is a parameter to change this default title?
Use a Greasemonkey/Tampermonkey script for this:
document.querySelector(".entity").innerHTML += " - Smartphone|Desktop"
For example:
// ==UserScript==
// #name Code Coverage
// #namespace script[id]
// #include http://127.0.0.1:8080/
// #version 1
// #grant none
// ==/UserScript==
document.querySelector(".entity").innerHTML += " - Smartphone|Desktop"
Then save the page as HTML, MHTML, data URL, or PDF.
References
Test Cases ยท greasemonkey/greasemonkey Wiki
Creating a dismissible banner component with Vanilla JavaScript

casperjs: how to include other javascript files during unit tests in tests themselves?

I am doing some unit test in casperjs and I got stuck: how do include dependency file from the test itself? Included javascript file can be just a bunch of functions, and does not declare any interface (module.exports = ... etc).
I know I can include from the command line
$ casperjs test --include=./my-mock.js mytest.js
but how can I include files from the test itself?
Putting following on the top does not work for me... my_mock is undefined
casper.options.clientScripts = ["./my-mock.js"]; //push() does not help either
//mytest.js is below
// ------------------------------------------
casper.test.begin('ajax mock test', function suite(test) {
my_mock.setFetchedData("bla");
my_mock.doRequest();
test.assertEquals( ......);
test.done();
});
// ------------------------------------------
CasperJS version 1.1.0-DEV using phantomjs version 1.9.1
Using phantom.injectJs method is the best option I've found so far. E.g. you're having two files in your directory: "tests.js" and "settings.js". You want to include "settings.js" into "test.js". The first thing you should do with your "test.js" is write the following:
phantom.injectJs('settings.js');
casper.test.begin(...
...
The reason that clientScripts isn't working is that it is loaded on each page load, so you don't have access to the objects/functions defined in the file outside of a casper.evaluate() call.
You can use require() to pull in modules, however you may need to modify your included script to work with this method.
Here is what I changed your mytest.js to:
var my_mock = require('my-mock');
casper.test.begin('ajax mock test', function suite(test) {
my_mock.setFetchedData("bla");
my_mock.doRequest();
//test.assertEquals( ... );
test.done();
});
And this is a quick script (my-mock.js) that I threw together to print out when you use the functions you provided.
module.exports = {
setFetchedData: function(a) {
console.log('setFetchedData: ' + a);
},
doRequest: function() {
console.log('doRequest');
}
};
I found useful this sample demonstrating --includes option:
$ casperjs test tests/ --pre=pre.js --includes=inc.js --post=post.js
to load functions that you often use in your tests.

How to make web_ui compile css files automatically

I'm using web_ui and whenever I change a CSS file in web/css/ it will not be compiled unless I change the web/index.html file. I guess that's because only the file 'web/index.html' is listed as entry point in build.dart.
But adding the stylesheet to the entry points list didn't work.
Is there a way to autocompile CSS files every time they are changed without having to edit the .html files?
Keep in mind that you can edit any .dart or .html file and the compiler will run; it doesn't have to be the entry point file.
Autocompilation of CSS files on change can be achieved by passing the compiler the full flag:
build(['--machine', '--full'], ['web/index.html']);
The machine flag tells the compiler to print messages to the Dart Editor console. For a full list of flags see Build.dart and the Dart Editor Build System.
This method means that every time a file is changed your entire project will be rebuilt instead of the usual incremental approach. If you have a large project this may take a while. Here is a more comprehensive build file that takes advantage of incremental compilation and only rebuilds the whole project if a css file was changed:
List<String> args = new Options().arguments;
bool fullRebuild = false;
for (String arg in args) {
if (arg.startsWith('--changed=') && arg.endsWith('.css')) {
fullRebuild = true;
}
}
if(fullRebuild) {
build(['--machine', '--full'], ['web/index.html']);
} else {
build(args, ['web/index.html']);
}

Minified script only in MVC4 BundleConfig

I am adding the following ScriptBundle in BundleConfig:
bundles.Add(new ScriptBundle("~/bundles/javascript").Include(
"~/Scripts/jquery-1.*",
"~/Scripts/load-image.min.js",
"~/Scripts/bootstrap.*",
"~/Scripts/bootstrap-image-gallery.*",
"~/Scripts/my.global.js"));
This is referenced at the end of my _Layout.cshtml as:
#Scripts.Render("~/bundles/javascript")
When debugging I notice that the output of this script rendering is:
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-image-gallery.js"></script>
<script src="/Scripts/my.global.js"></script>
Notice the load-image.min.js script is missing? What I want is to use that same minified script whether I'm debugging or not. Under release conditions the script is included in the bundled JS file.
I assume it's seeing the 'min', looking for an un-minified version, not finding one, then deciding what's best is to ignore it entirely. Brilliant. If I make a copy of load-image.min.js, call it load-image.js and then reference it in BundleConfig as "load-image.*" I find it is included in both configurations but what's the point of having to do that?
I assume I'm missing something here. I don't have the un-minified version and I frankly don't care about it. It's used by my Bootstrap image gallery plugin and nothing else. Any ideas out there?
This behavior has been improved (fixed) in the 1.1.0-alpha1 release. We moved all of the old default ignore list entries into a new DirectoryFilter ignore list that are only used when including search patterns like *.js which was the origional intent for this functionality. As a result this should no longer be an issue when you are including individual files explicitly.
Note: the one place this might still be an issue is if you try to include something like jquery-{version}.min.js.
There is ignoreList, which you can clear if you need, it looks like:
public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
{
if (ignoreList != null)
{
ignoreList.Ignore("*.intellisense.js");
ignoreList.Ignore("*-vsdoc.js");
ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
return;
}
else
{
throw new ArgumentNullException("ignoreList");
}
}
More details: Advanced Options of ASP.NET Bundling and Minification

Resources