Develop Reference

Excluding file from optimizing in Durandal build

I'm using Grunt to build the Durandal starter kit pro package.
It all works fine, except for one tiny detail. I would like to exclude one file (app-config below) from the optimizer and keep it as a non minified file when my build is done.
Based on other SO thread suggestions, I'm currently excluding it using empty:, which removes it from the optimized file as expected. However, when I open the built project I get an error in the console:
Uncaught Error: main missing app-config
options: {
name: '../lib/require/almond-custom',
baseUrl: requireConfig.baseUrl,
mainPath: 'app/main',
paths: mixIn({ }, requireConfig.paths, {
'almond': 'lib/require/almond-custom',
'app-config': 'empty:'
}),
optimize: 'none',
out: 'build/app/main.js',
preserveLicenseComments: false
}
Is almond the problem? I tried switching it to the full requirejs using include: ['path/to/require'], without success.
If you want to reproduce it locally you can either download the starter kit from the above link, or use a slightly configurated version which is closer to my example. Just run an npm install in the folder and you're all set.

I have downloaded you source code and do the following steps.
Extract zip file, open cmd and change the directory to this folder.
Run npm install to install all the dependencies.
Run grunt to start to build the project.
And when I open http://localhost:8999/ and saw the alert 1 which is alert(appConfig.foo); in your main.js.
After clicked Ok to hide the alert, the web page works fines. Any more input for you ?
So I am not sure how you are facing with this issue.

From the reference of the durandal issues found in this particular link
grunt-durandal
The main module controls the implementation of the durandal services
The link can be found in main.js
Here you can see the system.debug(true).You can remove it as written in the post here document.
The function as quoted in the article Overrides request execution timeout making it effectively infinite.
Also while using uglify in grunt the debug is set to false as per the documentation.
As per the documentation you need to set the system.debug(false)
Hope this might help a bit.

try:
....
paths: mixIn({ }, requireConfig.paths, {
'almond': ['lib/require/almond-custom', '!lib/require/almond-custom/app-config.js']
}),
....
just note the second path of app-config.js is correct. I think you should find your way, the above is a hint, if not a direct solution.

Configure karma to load test files last

I'm following John Papa's Style Guide and am having problems getting all of my Jasmine specs to load after everything else. The problem is that the directory structure of my app is flat, and thus the spec files are included in the same directory as the files they are testing.
files: [
'app/vendor/js/jquery.js',
'app/vendor/js/angular.js',
'app/vendor/js/*.js',
'bower_components/angular-mocks/angular-mocks.js',
'app/app.js',
'app/app.constants.js',
'app/app.config.js',
'app/**/*.app.js',
'app/**/*.js',
'app/**/*.spec.js',
'app/**/*.html'
]
The other problem is that in the Karma configuration file, it's including all of the .spec.js files in with the plain old .js files. So the second to last string in the above array is redundant, but it's there to illustrate what I am trying to do.
How do I get my spec files to load after all of the other JavaScript files?
EDIT: By following JP's style guide, your files should be named with a chaining syntax: the.directive.js, the.directive.spec.js. So, you can solve my problem by just including all all directives (.directive.js), controllers (.controller.js), etc. before the specs instead of using the universal .js. However, I want to see if someone comes up with a more robust solution.

Try with
files: [
'app/**/!(*spec).js',
'app/**/*spec.js',
...
]

How do I connect bower components with sails.js?

I'd like to be able to install Javascript dependencies through bower and use them in a sails.js app, but I can't figure out a way to do this with out just copying an pasting files from the bower_components folder to the Sails assets folder.
Ideally I think I'd like to use requirejs and point to the bower components in the main.js file. I may be trying to pound a square peg in a round hole, please let me know if so. Any thoughts on managing components/libraries with Sails are welcome.

In Sails 0.10 the 'assets/linker' directory no longer exists, however I found a lead on simple solution that gives some automation to the bower -> asset linker workflow while also allowing some granular control over what exactly ends up getting linked.
The solution is adding grunt-bower to your Sails.js compileAssets task
grunt.registerTask('compileAssets', [
'clean:dev',
'bower:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev'
]);
Then configure your grunt-bower task like so (as tasks/config/bower.js):
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
This will automatically copy your bower js and css files to the proper place for Sail's asset linker to find and automatically add to your project's layout template. Any other js or css files will still automatically be added after your bower files.
However this is still no silver bullet as this setup has 2 big caveats to it:
1 - The files that are added through bower-grunt have to be listed in bower.json's main array. If you see a file isn't being loaded you would expect to be, you must either edit that packages bower.json file OR add the dependency manually through grunt-bower's packageSpecific options.
2 - The order of bower files in the asset linker is currently alphabetical. My only recourse to adjust this order so far is tinkering around with an additional grunt task to manually re-order files prior to the rest of Sail's compileAssets task. However this one I'm confident there is something grunt-bower could do by supporting package copy ordering.

Note: the following answer is no longer completely relevant to the current version of SailsJS because there is no support for the linker folder as of SailsJS 0.10.
See: Sails not generating linker
Original answer:
I was able to figure out a solution for this, which is actually pretty simple. I had not realized you could configure where bower places it's files.
Create a .bowerrc file and change the directory where bower components are installed, in the case of Sailjs they should be put into the assets folder.
/*
* Create a file called .bowerrc and put the following in it.
* This file should be in the root directory of the sails app.
*/
{
"directory": "assets/linker/bower_components"
}
Sails will then use grunt to copy them to the .tmp/public/assets folder whenever a file is change. If you don't wish to have sails continually deleting and then recopying those files you can exclude them in the grunt file.
/*
* This is not necessary, but if you have a lot of components and don't want
* them constantly being deleted and copied at every file change you can update
* your Gruntfile.js with the below.
*/
clean: {
dev: ['.tmp/public/**',
'!.tmp/public',
'!.tmp/public/bower_components/**'],
build: ['www']
},
One tip on using requirejs with sails. By default you will get an error from the socket.io file since sails will load it without using requirejs. This will throw an error since socket.io supports amd style loading, more details here http://requirejs.org/docs/errors.html#mismatch.
The simplest way to fix this is to just comment out the lines near the end of the socket.io.js.
/*
* Comment the below out in the file assets/js/socket.io.js, if using requirejs
* and you don't want to modify the default sails setup or socket.io.
*/
if (typeof define === "function" && define.amd) {
define([], function () { return io; });
}
The other way would be to recode the sails files in assets/js named "socket.io.js", "sails.io.js" and app.js to be amd modules.

The simplest way I've found of achieving this is simply to add the individual Bower components to your tasks/pipeline.js file. For example, here's how you might add Modernizr:
// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/**/*.js',
// =========================================================
// Modernizr:
'bower_components/modernizr/modernizr.js',
// =========================================================
// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/**/*.js'
];
A link to bower_components/modernizr/modernizr.js then gets inserted in the <!--SCRIPTS--> placeholder in your layout template, and it also gets minified, etc, when you run sails lift --prod.

Sorry for my late.
I think include bower_components in linker it's a bad idea, because when you will lift sails, everything in it will be copied in .tmp and include in tags.
For example, if you have include Angular with bower, you will have two inclusions in your script: one for angular.js and one for angular.min.js. And having both is a mistake.
Here is my solution on my projects :
I have created a folder bower_component in my root directory.
I have added this line in my Gruntfile.js in the array files in copy:dev
{ '.tmp/public/linker/js/angular.js': './bower_components/angular/angular.js' }
And for each files I want to include, I need to manually add a new line in this array. I haven't find an another automatic solution. If someone finds a better solution... ;)

There is more than one approach to hooking up SailsJS and Bower.
A package for SailsJS that integrates Bower via a custom generator exists here:
https://www.npmjs.com/package/sails-generate-bower
There is one for Gulp as well.

Exclude dependencies from JS Test Driver code coverage

In my JS Test Driver configuration file, I'm excluding unit tests from code coverage calculation by putting them under test instead of load.
However, I can't do this for dependencies, like jQuery of Underscore.js, since they need to be loaded before my code.
Is there any way around this? Or do I just deal with the slow code coverage runs and statistic clutter?

Solution 1:
There's a way using the ´args´ parameter as Greg says, but that way unfortunately you have to specify the full path, as this (asuming Windows):
plugin:
- name: "coverage"
jar: "lib/coverage-1.3.2.jar"
module: "com.google.jstestdriver.coverage.CoverageModule"
#Here put the files that have to be ignored by coverage. Non-existent files do not harm.
args: "
D:\\apache\\htdocs\\XTIME\\js\\lib\\ext-all.js,
D:\\apache\\htdocs\\XTIME\\js\\lib\\jquery-1.7.2.min.js,
"
For linux filesystems, you don't have to use double slash.
Solution 2:
There's also a patched jar for 1.3.5 on this thread that allows you to exclude files that match a regular expression, so you'd have:
plugin:
- name: "coverage"
jar: "lib/coverage-1.3.5.serve-patch.jar" #this patched jar allows to use excludesRegex
module: "com.google.jstestdriver.coverage.CoverageModule"
args: "excludesRegex: /js/lib/.*\\.js$"
The /js/lib/.*\.js$ regex means "Exclude all the .js files located inside js/lib". (With this patch you don't have to worry about Windows backslashes)
I prefer this way much more, as it's portable because it does not depend on a specific path for your application.
You can download the patched version here (look for Comment 11 in the thread).
Hope this helps.
Cheers, from La Paz-Bolivia

You can exclude libraries from code coverage by specifying them under "args" in the config. However, note that the paths must be absolute. At the time of writing, the latest jsTestDriver code-coverage plugin will only ignore the libraries if the paths are absolute.
See here.

node.js require relative paths

I have node.js modules in several directories because I am following MVC pattern. I am in need to call require to several modules which are located outside current directory. How can I do that?
/app/controller/c1.js
...
/app/model/m1.js
...
/app/view/v1.js
...
/app/view/v2.js
// this works
require('./v2');
// these doesn't work
require('../model/m1.js');
require('~/model/m1.js');
...
Why is that so?

For modules in other directories, use the format:
testAuth =require('./public/javascripts/test.js'),
//in case the test.js is in the public/javascripts directory (I am using Linux)
If you skip the '.js' extension, node should look for .js first before .json etc.
hope it helps.

check out this project
https://github.com/nadav-dav/rekuire
it allows you to use "require" without the relative paths, just stating the file/class name