How can I include javascript assets selectively in SailsJS?

In a Sails.js application, how can I include javascript assets selectively?

For instance, if I have an admin page and admin.js lives inside the assets/js directory. How do I keep the admin.js from loading on the public index page?

I'm aware that I could move the js out to the public directory, and include the script in my admin view's template. But I'm still unable to include it after the assets.js() call inserts it's javascript. I need it to be inserted after the sails.io.js script is loaded.

Is there any way to selectively load scripts and still have access to the sails.io.js which is automatically included with the assets.js() function call? Is there a better paradigm for this kind of situation?

EDIT:

Since the release of SailsJS 0.9 and the restructuring of the asset management system, this question doesn't really apply anymore.

Sailsjs uses asset-rack to serve /assets. With the default layout page, sailsjs serves pages that look like (dummy2.js is included with an explicit < script >):

<html>
  <head>
    ...
    <script type="text/javascript" src="/assets/mixins/sails.io-d338eee765373b5d77fdd78f29d47900.js"></script>
    <script type="text/javascript" src="/assets/js/dummy0-1cdb8d87a92a2d5a02b910c6227b3ca4.js"></script>
    <script type="text/javascript" src="/assets/js/dummy1-8c1b254452f6908d682b9b149eb55d7e.js"></script>
  </head>
  <body>
    ...
    <script src="/public/dummy2.js"></script>
    ...
  </body>
</html>

So sailsjs does not concatenate files (at least not in development mode). sails.io (socket-io) is always included before /assets/js in layout, and before < script > on the page.

It looks like your admin.js is expecting a condition which sails.io has not yet set, perhaps its negotiating a transport with the server? Try waiting for the condition to be set.

In a Sails.js application, how can I include javascript assets selectively?

I selectively load js assets using a wrapper around assets.js(). This snippet uses Jade's "-" and "!{...}". EJS would instead use "<%...%>" and "<%=...%>"

<!-- JavaScript and stylesheets from your assets folder are included here -->
!{assets.css()}
-function selectAssets (assetsjs, files, ifInclude) {
-  return assetsjs.split('\n').reduce(function (prev, curr, i) {
-    var frag = curr.match(/src="\/assets\/js\/\w{1,}\-/);
-    if(frag) {
-      var file = frag[0].substring(16, frag[0].length - 1);
-      if ((files.indexOf(file) === -1) == ifInclude) { return prev; }
-   }
-   return prev + curr + '\n';
-  }, '');
-}
//!{assets.js()} this line is replaced by:
!{selectAssets(assets.js(), ['dummy1', 'dummy5', 'dummy6'], false)}

The above would not include /assets/js/dummy1.js, dummy5, dummy6 with the layout. If you wanted to include dummy1 and dummy5 on a particular page, you would place

!{selectAssets(assets.js(), ['dummy1', 'dummy5'], true)}

on that page.

Note: The code assumes file name don't contain "-". Its straighforward to generalize for css and templates. sails-io would be a special case for mixins.

I know this is a old question but since people are still looking for this.

Sails has a folder called tasks in the root after you create a new project.

The file you are looking for is

pipeline.js

That file holds a variable called jsFilesToInject

// 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',
  'js/sails.io.js'


  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];

Just put your script that you want loaded before sails.io.js.

This is relevant for sails 0.11.x

another way that is valid is to create a views/partials folder

and create a new file like mapScripts.ejs drop the script tags there and in your view use

<% include ../partials/mapScripts %>

Yes, you put a condition in template. :)

or add another "block" for your js.

extends ../layout

block body
    <h1>hello</h1>

block jsscripts
    <scripts> ..... </script>

To answer part of your question about where included files are located.

In 0.10 version order of the files is set in file tasks/values/injectedFiles.js as I recall in previous versions it was determined in Gruntfile.js itself.

Hammad Ali

You can add reference of your custom file in tasks/pipeline.js

var jsFilesToInject = [
  'js/dependencies/sails.io.js',
  'js/dependencies/**/*.js',
  'js/**/*.js',
  'js/yourcustomFile.js'
];

来源：https://stackoverflow.com/questions/17557567/how-can-i-include-javascript-assets-selectively-in-sailsjs

标签

javascript

node.js

express

sails.js