Skip to main content
highlighted:

Plugin Style sheet and Javascript

Style sheets and client Javascript register and order is avaible for we.js html repsonse type.

Avaible in we-plugin-view

With this feature you can register assets with weight and unique names how allows to others plugins add others assets after or before any file

The HTML response have a windows.we object with all client side functions and logic.

Register a Stylesheet file:

In plugin.js file:

    plugin.addCss('jquery.cssemoticons', { // unique name
      // weight for use in assets print order
      weight: 5, 

      // Plugin name where this asset is localed
      pluginName: 'we-core',

      // path to you file, 
      // all assets need be inside the **files/public/** folder
      path: 'files/public/jquery.cssemoticons/jquery.cssemoticons.css'
    });

Register a client side javascript file in plugin public folder

In plugin.js file:

    plugin.addJs('load-image.all', {
      // weight for use in assets print order    
      weight: 6, 

      // plugin type is the default
      // type: 'plugin',

      // Plugin name where this asset is localed
      pluginName: 'we-core',

      // all assets need be inside the **files/public/** folder
      path: 'files/public/js/load-image.all.js'
    });

Register a client side javascript file how are in project public folder

In plugin.js file:

    plugin.addJs('load-image.all', {
      // weight for use in assets print order    
      weight: 6, 

      // project type
      type: 'project',

      // all assets need be inside the **files/public/** folder
      path: 'files/public/js/load-image.all.js'
    });

For print the .css e .js file in your template use the:

This functions is used in theme html.hbs files:

Render stylesheet tags

{{{render-stylesheet-tags}}}

Render javascript tags

In header:

{{{render-javascript-tags 'header'}}}

In footer:

 {{{render-javascript-tags 'footer'}}}

How to build assets for production

You need to contact and minify all assets after deploy you project for this use the command:

npm ru build

Or

gulp build

How will run all default gulp tasks for prepare your assets for poduction

Examples

See in we.js plugins like the we-plugin-file plugin.js file for usage examples: https://github.com/wejs/we-plugin-file/blob/master/plugin.js#L232



afterContent:
Widget: Comments 13:

Comments