SailsJS Linker (Grunt) Ignore files (Gruntfile.js)

Question

I am using bower for asset management. The Bootstrap bower repo is coming with a Gruntfile.js.

Is there a way to exclude this from the linker?

I have tried:

var jsFilesToInject = [
     '!**Gruntfile.js',
//     ...
]

But it's not working - am I putting this string in the wrong spot?

Generated HTML and Error

File Structure

P.S. I followed this guide to get here: StackOverFlow Question and ran bower install bootstrap and bower install angular.

Answer 1

This is a bug in the current sails frontend generator. I have submitted a PR, but existing applications will have to be fixed manually, since the generator is only executed once.

The issue is in the end of the current pipeline.js file, in the section that actually exports the settings. At the moment it goes like this:

// pipeline.js

//... Defined rules ...

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;
});

As you can see it prepends the relative path to the tmp folder or the assets folder for templates. This results in the rule !js/foo.js in .tmp/public/!js/foo.js, which will probably not match anything.

The solution is to replace the block above in pipeline.js with the following:

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;
});

This will check if the given rule starts with an ! and prepend it correctly, so !js/foo.js will result in !.tmp/public/js/foo.js that will correctly match.

The exclusions have to be set AFTER the result set was created. This is according to grunt's documentation. So for your case it would be:

var jsFilesToInject = [
     //...
     '!**Gruntfile.js',
]

Answer 2

A working configuration for me has been the following :

• put the bower_components folder one level up, directly in the assets folder.

• put all your app related files in the linker folder

  | .bowerrc
  | assets/
  |-- bower_components/
  |---- bootstrap/
  |------ dist/
  |-------- bootstrap.js
  |---- angular/
  |-- linker/
  |---- js/
  |------ sails.io.js
  |------ socket.io.js
  |---- styles/
  |---- templates/
  

In your Gruntfile.js have a jsFileToInject setup like so

    var jsFilesToInject = [
        // Below, as a demonstration, you'll see the built-in dependencies
        // linked in the proper order order
        // Bring in the socket.io client
        'linker/js/socket.io.js',

        // then beef it up with some convenience logic for talking to Sails.js
        'linker/js/sails.io.js',

        // jQuery and plugins
        'bower_components/jquery/jquery.js',

        // Bootstrap
        'bower_components/bootstrap/dist/bootstrap.js',

        // Angular
        'bower_components/angular/angular.js',

        // App file that needs to load first
        'linker/js/app.js',

        // All of the rest of your app scripts imported here
        'linker/**/*.js'
    ];

And in the .bowerrc at the root of your project, you put

    {
        "directory": "assets/bower_components"
    }