grunt-bower-task is the wrong way

[HaNdTriX]

Hey @smies

Thank you for this generator.
I tried it and it works well, but the underlying grunt-bower-task just doesn't work in the real world.

The reason for that is not the grunt-bower-task, but the fact that people have different understandings of the bower.json file.

Example: Bootstrap

Installing bootstrap with grunt-bower-task will create the following Directory:

Directory: assets/vendor/bootstrap

bootstrap.css                       // References a non existing source map
bootstrap.js                        // Do I must use all bootstrap js components?
bootstrap.less                      // Useless since references are missing
glyphicons-halflings-regular.eot    // Useless since not properly referenced by .css
glyphicons-halflings-regular.svg    // Useless since not properly referenced by .css
glyphicons-halflings-regular.ttf    // Useless since not properly referenced by .css
glyphicons-halflings-regular.woff   // Useless since not properly referenced by .css

This is just one example why the grunt-bower-task is just not usable.

Proposal: Using bower with sails.js

1. Create a .bowerrc file.

{
    "directory": "assets/bower_components"
}

This tells bower to install all components in the assets folder.

2. Add extra clean task

File: tasks/config/clean.js

module.exports = function(grunt) {

    grunt.config.set('clean', {
        dev: ['.tmp/public/**'],
        build: ['www'],
        bower: ['.tmp/public/bower_components/**']
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
};

3. Modify grunt prod task

We don't want to deploy entire git repos to production.

File: tasks/config/clean.js

module.exports = function (grunt) {
    grunt.registerTask('buildProd', [
        'compileAssets',
        'concat',
        'uglify',
        'cssmin',
        'linkAssetsBuildProd',
        'clean:bower',
        'clean:build',
        'copy:build'
    ]);
};

4. Exclude assets/bower_components from the watch task

module.exports = function(grunt) {

    grunt.config.set('watch', {
        options: {
            livereload: true
        },
        api: {

            // API files to watch:
            files: ['api/**/*']
        },
        views: {

            // View files to watch:
            files: ['views/**/*']
        },
        assets: {

            // Assets to watch:
            files: ['assets/**/*' , '!assets/bower_components/**', 'tasks/pipeline.js'],

            // When assets are changed:
            tasks: ['syncAssets' , 'linkAssets']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
};

Pros/Cons

Pros

• Now we can reference all files direct from the git repo. This allows us to pick only the files we need.
• Use bower directly without extra layer

Cons

• More complex to integrate.

What do you think of this approach?

[edy]

Cons:

• grunt will copy bower_components into .tmp on every sails lift. our bower_components has 14MB in it and would massively slow down a lift during development

[HaNdTriX]

thx @edy .

We could solve this issue by creating a symlink instead of copying the entire directory.

[animedbz16]

We are running into the same/similar problem.

As it appears only part of the bootstrap files are being copied over through grunt-bower-task specifically only files listed in the bootstrap's package.json "main" section:

  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js",
    "dist/fonts/glyphicons-halflings-regular.eot",
    "dist/fonts/glyphicons-halflings-regular.svg",
    "dist/fonts/glyphicons-halflings-regular.ttf",
    "dist/fonts/glyphicons-halflings-regular.woff"
  ],

This leaves out access to the /dist/css/bootstrap-theme.css files, as well as modifying the directory structure.

Not sure if this is directly with the generator or with grunt-bower-task directly.

[hellowin]

My 'old' grunt-bower-task is like this https://github.com/hellowin/sails-bower-task/blob/master/bower.js. I created that just in short term for Bootstrap's file structure handling, because until today I don't get any error beside Bootstrap. It's old because I'm not maintained it well, just for my daily use.

But I agree with edy, put bower_components entirely in assets folder is not a good way. Try using large dependecies like OpenLayers, your app will very slow to get up with sails lift or sails debug.

I think using grunt-bower-task is a good way, but keep in mind to create layout method that compatible with sails nature.

[HaNdTriX]

Thx. I'll try it.

[hellowin]

You are welcome.

I wonder is smies still watching this repo? It's true that the implementation of grunt-bower-task in this repo is still not compatible with bootstrap. Maybe someone can help to ask a merge request or something to fix it? Here look at mine https://github.com/hellowin/sails-bower-task/blob/master/bower.js, it's not mature yet but it has more compatibility with bootstrap. I'm still newbie in opensourcing and git, also I don't understand how to create sails-generator yet, lol.

[meltenc]

If anyone has the same issue, this is the right "exportsOverride" of the bower.json to install bootstrap correctly :

  "exportsOverride": {
    "bootstrap": {
      "js": "dist/js/*.min.*",
      "css": "dist/css/*.min.*",
      "fonts": "dist/fonts/*.*"
    }
  }