Sails.js specify JS files to exclude from auto-insertion

Question

I'm attempting to set up my sails app to use Browserify (which is working fine). However, I want to not have the non-browserified files automagically injected into my web page.

In my tasks/pipeline.js file I've attempted this (my js files that need to be browserified are in he browserify directory):

// 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',

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

  // Ignore browserify directory
  '!js/browserify/**/*'
];

This however is not working and my non-browserified files are being injected into the web page. I'm new to Sails, so it's highly likely that this isn't the correct way to achieve this at all. Any advice would be greatly appreciated.

I don't understand what you want to do, you don't want all file in browserify but there are loaded or you want them but not others ? Cause the script will not load every js with 3 level path like /js/browserify/admin/admin.js will not be loaded with your configuration so '!js/browserify/**/*' is not needed — jaumard, Mar 29 '15 at 08:43
@jaumard I want to auto-inject everything in the `js` directory **except for** everything in the `browserify` directory. — Nathan McCallum, Mar 29 '15 at 09:46
Seems like this should be possible with a fix with how Sails links files, as it is possible with Grunt and is an open issue in review: https://github.com/balderdashy/sails/issues/2375. — ryanm, Sep 15 '15 at 15:54

score 3 · Answer 1 · answered Nov 02 '15 at 20:48

You can exclude files by using the "exclude" (!) operator like so :

var cssFilesToInject = [
  'styles/**/*.css',
  '!styles/ie8.css',
  '!styles/ie9.css'
];

// 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',

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

  "!js/dependencies/respond/respond.src.js",
];

This is the perfect answer, if you combine it with (as mentioned elsewhere) the place in the layout, below the automated scripts, where you can load "local" scripts: <%- blocks.localScripts %>, and then in the view just specify which local scripts to load: <% block('localScripts', '') %> — Matt Payne, Jan 28 '18 at 00:13

Megakoresh · Accepted Answer · 2015-03-29T10:18:08.380

Its actually rather easy, simply do not put ** there. The ** wildcard means recursive search. What I'd do is the following:

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',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/*.js', //all files directly in .js folder will be included, but any folders not specified above will not
];

Then if you add a folder to js directory that you actually WANT to include, simply make sure to specify it above between dependencies and last line like

'js/folderIWantToInclude/**/*.js'

Do not forget, that grunt copies all files to .tmp and sometimes you need to manually clear it out for changes like this to take effect. I also recommend visiting Grunt Configuration file docs for reference - it is grunt that does this inclusion, not sails.

This solution is fair enough. I just wanted to know if I could ignore a specific directory. Seems like not, unfortunately. — Nathan McCallum, Mar 29 '15 at 10:34

score 0 · Answer 3 · edited May 23 '17 at 11:51

You can make it work your way, with a quick fix: At the end of pipeline.js, replace the following block of code:

module.exports.cssFilesToInject = cssFilesToInject.map(function(path) {
  return '.tmp/public/' + path;
});
module.exports.jsFilesToInject = jsFilesToInject.map(function(path) {
  return '.tmp/public/' + path;
});
module.exports.templateFilesToInject = templateFilesToInject.map(function(path) {
  return 'assets/' + path;
});

With

module.exports.cssFilesToInject = cssFilesToInject.map(function(path) {
  var tmpPath = '.tmp/public/';
  if (path.substring(0,1) == '!')
    return '!' + tmpPath + path.substring(1);
  return tmpPath + path;
});
module.exports.jsFilesToInject = jsFilesToInject.map(function(path) {
  var tmpPath = '.tmp/public/';
  if (path.substring(0,1) == '!')
    return '!' + tmpPath + path.substring(1);
  return tmpPath + path;
});
module.exports.templateFilesToInject = templateFilesToInject.map(function(path) {
  var tmpPath = 'assets/';
  if (path.substring(0,1) == '!')
    return '!' + tmpPath + path.substring(1);
  return tmpPath + path;
});

As you can see the original code prepends the relative path to the tmp folder to the given rules, resulting in the ! being somewhere midway in the final path. For a full explanation see my answer to a very similar issue.

Sails.js specify JS files to exclude from auto-insertion

3 Answers3