gritcode / gritcode-components

Custom components based on Vuestrap.
http://gritcode.github.io/gritcode-components/#/toast
MIT License
204 stars 9 forks source link

Can we get a way to install this via npm/browserify/laravel-elixir? #4

Closed johnRivs closed 8 years ago

johnRivs commented 8 years ago

Some of us don't want to use Webpack or Bower.

At least I'd like to know, is there a way to load what's on the dist folder in a project using browserify without relying on Bower?

EDIT: I can't even install it via Bower, it says:

bower gritcode-components#* not-cached git://github.com/gritcode/gritcode-components.git#*
bower gritcode-components#*    resolve git://github.com/gritcode/gritcode-components.git#*
bower gritcode-components#*   download https://github.com/gritcode/gritcode-components/archive/0.4.7.tar.gz
bower gritcode-components#*    extract archive.tar.gz
bower gritcode-components#* EMALFORMED Failed to read X:\Users\USER\AppData\Local\Temp\USER\bower\067e1a449fcc97d6d7681b3e371633c2-5096-tGYNH7\bower.json

Additional error details:
Unexpected token ]
kzima commented 8 years ago

@johnRivs thanks for your comment.

I fixed that issue with bower, so you can now install it ok (v0.4.8) Yes, you can use browserify to load a compiled file from the dist folder:

import components from './bower_components/gritcode-components/dist/gritcode-components.js'

In the future I might look at browserify setup to allow importing source components. Is this something you can contribute to?

adamgoose commented 8 years ago

After installing with Bower, and using the import statement above, I'm getting the following output when running gulp.

Also, I'm using Laravel Spark. :P

[Laravel Elixir] Browserify Failed!: Cannot find module './bower_components/gritcode-components/dist/gritcode-components' from '/Users/adam/Sites/mote.io/resources/assets/js/components/servers'
{ [Error: Cannot find module './bower_components/gritcode-components/dist/gritcode-components' from '/Users/adam/Sites/mote.io/resources/assets/js/components/servers']

gulpfile.js:

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function (mix) {
    mix.less('app.less')
        .browserify('app.js', null, null, {
            paths: ['vendor/laravel/spark/resources/assets/js']
        })
        .copy('node_modules/gritcode-components/dist/gritcode-components-bundle.min.js', 'public/js/gritcode-components.js')
        .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
        .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});
kzima commented 8 years ago

it seems like something is missing in your setup. In your gulp you copy from node modules but then you import from the bower components.

How did you install gritcode-components? via npm or bower?

adamgoose commented 8 years ago

Haha both. I've tried every single which way of getting this compiled into my application properly, and it's just not working.

Tried imports, requires, and this mixin method as well. No luck.

kzima commented 8 years ago

It is hard for me to tell exactly what is wrong. I can only suggest to start simple, check this few setups first: https://github.com/kzima/vuestrap-styleguide https://github.com/kzima/vuestrap-base-components/blob/master/examples/basic.html https://gist.github.com/kzima/fb3576bb3cb4be64b508

I hope that helps.