smies / sails-generate-bower Goto Github PK

View Code? Open in Web Editor NEW

18.0 18.0 5.0 168 KB

License: MIT License

JavaScript 100.00%

sails-generate-bower's People

Contributors

Stargazers

Watchers

Forkers

tarun1793 karnith glavin001 kst404 gioele89

sails-generate-bower's Issues

Bower dependencies are not resolved correctly

I used this generator in order to install bootstrap in my Sails app. Bootstrap depends on jQuery, so it automatically gets installed as dependency. However, the sails-linker doesn't seem to know about the bower dependency tree, so it ends up including the scripts in alphabetical order, placing jQuery after bootstrap. When I load my app in the browser, I get the error message

Uncaught TypeError: $ is not a function

as you'd expect.

Its broken for me

I installed bootstrap as explained in Readme. Bootstrap's dependencies are not copied and bootstrap.less is not added to importer.less and therefore, it doesn't compile.

bootstrap-theme.css not added

First, thank you for the generator.

Is there any way to get it to add the bootstrap-theme.css into assets/vendor folder (it is in the bootstrap/dist/css folder normally when you just pull boostrap down with bower)? Right now it only seems to add bootstrap.css into that folder.

Thanks!

Grunt-bower: Fatal error: Path must be a string. Received

It works in the first time, but when I restart the sails, the initialization get this error below

Info:
Sailsjs version: 0.12.11

Bower file:

{
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-google-places-autocomplete": "^0.2.7"
  },
  "name": "a",
  "version": "1.0",
  "author": "me",
  "private": true
}

Error:

debug: -------------------------------------------------------
verbose: Grunt :: Running "bower:install" (bower) task
verbose: Grunt :: >> Cleaned target dir /home/ubuntu/workspace/assets/vendor
error: 
------------------------------------------------------------------------
Fatal error: Path must be a string. Received [ '/tmp/ubuntu/bower/angular-16262-X6m5cg',
  [Function: _cleanupCallback] ]
Running "bower:install" (bower) task
>> Cleaned target dir /home/ubuntu/workspace/assets/vendor
------------------------------------------------------------------------

error: Looks like a Grunt error occurred--
error: Please fix it, then **restart Sails** to continue running tasks (e.g. watching for changes in assets)
error: Or if you're stuck, check out the troubleshooting tips below.

error: Troubleshooting tips:
error: 
error:  *-> Are "grunt" and related grunt task modules installed locally?  Run `npm install` if you're not sure.
error: 
error:  *-> You might have a malformed LESS, SASS, CoffeeScript file, etc.
error: 
error:  *-> Or maybe you don't have permissions to access the `.tmp` directory?
error:      e.g., `/home/ubuntu/workspace/.tmp` ?
error: 
error:      If you think this might be the case, try running:
error:      sudo chown -R 1000 /home/ubuntu/workspace/.tmp

grunt-bower-task is the wrong way

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?