YUI Loader for css

Board index » YUI 3.x: » General

Page 1 of 2

[ 11 posts ]

Go to page 1, 2 Next

New Topic | Post Reply | Print view

Previous topic | Next topic

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Tags:

YUI Loader for css

Posted: Thu Nov 17, 2011 10:03 pm

+0-

Hi All,

I am trying to use yui loader to perform following task
1) pull the yui3 core and yui3 gallery from yahoo cdn network
2) pull the custom yui3 module created by me from my server (I don't have combo loader and I am okay to load file one at a time)
My server side folder structure
js/gf/build
gf-simple
- assets
- gf-simple.css
-gf-simple-debug.js
-gf-simple-min.js

I am using following configuration in HEAD section
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI_conf = {
filter: "debug",
charset: 'utf-8',
groups:{
greenfield:{
combine:false,
base:"./js/gf/build/",
patterns:{
"gf-":{}
}
}
}
};

When I am doing
YUI(YUI_conf).use('node',"gf-simple","scrollview", function (Y) {
});

1) It loads scroll view related files from yahoo cdn
2) It does load gf-simple-debug,js from my local server but it is not loading css from assets/ folder

Does any one know what configuration should I use so that css can also be loaded from assets/ folder

Mayank

Steven Olmsted

YUI Contributor

Username: solmsted
Joined: Wed Apr 14, 2010 1:47 pm
Posts: 82
Location: Richmond, VA
GitHub: solmsted
Gists: solmsted
IRC: solmsted

Tags:

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 8:39 am

+0-

It might be easiest if you specifically define each module in the yui config.

Code:

YUI_conf = {
    filter: "debug",
    charset: 'utf-8',
    groups:{
        greenfield:{
            base:"./js/gf/build/",
            combine:false,
            modules: {
                'gf-simple': {
                    path: 'gf-simple/gf-simple-min.js',
                    requires: [
                        'gf-simple-css'
                    ],
                    type: 'js'
                },
                'gf-simple-css': {
                    path: 'gf-simple/assets/gf-simple-min.css',
                    type: 'css'
                }
            }
        }
    }
}; 

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 9:21 am

+0-

Thank you Steven!

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Tags:

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 10:13 am

+0-

Thank you Steven, one moew question. How could I make configuration such that when filter is on debug mode it downloads debug version else minified version

Steven Olmsted

YUI Contributor

Username: solmsted
Joined: Wed Apr 14, 2010 1:47 pm
Posts: 82
Location: Richmond, VA
GitHub: solmsted
Gists: solmsted
IRC: solmsted

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 11:07 am

+0-

I don't know if this is well documented anywhere but I discovered this through trial and error. When you define the module using path or fullpath, set it to the -min version of the file. Then the filter 'DEBUG' will automatically change it to -debug and the filter 'RAW' will drop the suffix completely. There are also ways to create custom filters but I have never tried.

Jeff Craig

YUI Contributor

Username: foxxtrot
Joined: Thu Dec 04, 2008 9:20 am
Posts: 135
Location: Pullman, WA
Twitter: foxxtrot
GitHub: foxxtrot
Gists: foxxtrot
IRC: foxxtrot

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 11:26 am

+0-

Sort of what Steven said.

Loader expects to be pointed at the minified version of the file by the 'path' attribute. But rather than using the 'filter' configuration option, which is applied to everything you load, I'd suggest using the 'filters' option, which is on this slide from my loader talk at YUIConf 2011. This allows you to pull in the debug version of only the modules you want to, which is actually a lot more helpful.

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Tags:

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 11:36 am

+0-

Yeah there is no documentation about loader configuration

. Anyways it does converts js path into debug depending upon the filter. But for css it doesn't and I just realized YUI3 codebase has only raw version of css that might be the reason they are not changing the path of css.

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Re: YUI Loader for css

Posted: Fri Nov 18, 2011 11:45 am

+0-

Thank Jeff for the slide.

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Tags:

Re: YUI Loader for css

Posted: Mon Nov 21, 2011 7:59 pm

+0-

Hi All,

Just wanted to updated I have added combo loader as well. I am using nodejs combo loader.

This is simple nodejs script.

Code:

var comboServer = require('combohandler/lib/server'),
    app;

app = comboServer({
  roots: {
    '/gf': '../../Sites/yahoo/js/gf/build/'
  }
});

app.listen(3000);

Following configuration

Code:

              YUI_conf = {
           
                charset: 'utf-8',
                groups:{
                    greenfield:{
                        base:"./js/gf/build/",
                        root:'/',
                        combine:true,
                        comboBase:'http://localhost:3000/gf?',
                        modules: {
                            'gf-simple': {
                                requires: [
                                    'gf-simple-css'
                                ],
                                path:"gf-simple/gf-simple-min.js",
                                type: 'js'
                            },
                            'gf-simple2': {
                                requires: [
                                    'gf-simple2-css'
                                ],
                                path:"gf-simple2/gf-simple2-min.js",
                                type: 'js'
                            }

                        }
                    },
                    
                    greenfieldCss:{
                        base:"./js/gf/build/assets/",
                        comboBase:'http://localhost:3000/gf?',
                        root:'assets/',
                        combine:true,
                        modules: {
                            'gf-simple-css': {
                                path:"gf-simple-css/gf-simple.css",
                                type: 'css'
                            },
                            'gf-simple2-css': {
                                path:"gf-simple2-css/gf-simple2.css",
                                type: 'css'
                            }

                        }
                    }
                }
            }; 
 

It is working great, Thank you for all your help

Mayank

Mayank Gupta

YUI Contributor

Username: mzgupta
Joined: Sun Jul 31, 2011 1:40 pm
Posts: 42
GitHub: mzgupta
Gists: mzgupta

Tags:

Re: YUI Loader for css

Posted: Mon Nov 21, 2011 8:00 pm

+0-

Hi All,

Just wanted to updated I have added combo loader as well. I am using nodejs combo loader.

This is simple nodejs script.

Code:

var comboServer = require('combohandler/lib/server'),
    app;

app = comboServer({
  roots: {
    '/gf': '../../Sites/yahoo/js/gf/build/'
  }
});

app.listen(3000);

Following configuration

Code:

              YUI_conf = {
           
                charset: 'utf-8',
                groups:{
                    greenfield:{
                        base:"./js/gf/build/",
                        root:'/',
                        combine:true,
                        comboBase:'http://localhost:3000/gf?',
                        modules: {
                            'gf-simple': {
                                requires: [
                                    'gf-simple-css'
                                ],
                                path:"gf-simple/gf-simple-min.js",
                                type: 'js'
                            },
                            'gf-simple2': {
                                requires: [
                                    'gf-simple2-css'
                                ],
                                path:"gf-simple2/gf-simple2-min.js",
                                type: 'js'
                            }

                        }
                    },
                    
                    greenfieldCss:{
                        base:"./js/gf/build/assets/",
                        comboBase:'http://localhost:3000/gf?',
                        root:'assets/',
                        combine:true,
                        modules: {
                            'gf-simple-css': {
                                path:"gf-simple-css/gf-simple.css",
                                type: 'css'
                            },
                            'gf-simple2-css': {
                                path:"gf-simple2-css/gf-simple2.css",
                                type: 'css'
                            }

                        }
                    }
                }
            }; 
 

It is working great, Thank you for all your help

Mayank

Page 1 of 2

[ 11 posts ]

Go to page 1, 2 Next

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum