Asset-import NPM

asset-import

Easily import and mount assets for your express projects.

Side note: I wrote this because in some of my projects I don't personally like using grunt, or other tools, to compile my sources.

Usage

Asset-import can include files within and outside of the public/static directory that express uses.

assetimport(options,express app);

app.js

var ais = require('asset-import');
ais({
   assets: {
      'main': {
         src: [
            {
               src: ["stylesheets/style.css"],
               cwd: "public/"
            },
            {
               src:['source/test.css', 'source/test.scss'],
               mount: true
            },
            {
               src:["source/*.js"],
               mount: true
            }
         ]
      }
   },
   debug: true
}, app);

Inside a view:

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <%- assetimport('main') %>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

Options

Options presets:

   assets: {},
   debug: true,
   cwd: process.cwd(),
   cache: true,
   cacheAge: 2592000,
   saveDir: "assetbuilds",
   uglifyjs: {
      mangle: true,
      drop_debugger: true,
      dead_code: false,
      unused: true
   },
   uglifycss: {
      'ugly-comments': true
   }

Option	Meaning
`assets`	Objects with the assets you would like to import into your views
`debug`	Tells ais to compress your assets (supports css and js)
`cwd`	Working directory, defaults to process.cwd()
`cache`	Pairs with `cacheAge`, it sends a cache header on the assets to tell browsers to keep them in the local cache
`uglifyjs`	Options to pass to uglifyjs
`uglifycss`	Options to pass to uglifycss

Mounting

Asset-import can "mount" files not in the express static directory so that they may be accessed publicly.

   assets: {
      main: {
         // These options can be put here
         // cwd: "path/",
         // mount: true,
         // mountPath: "fakepath/"
         src: [
            'stylesheets/main.css',
            'source/orJsFiles.js',
            {
               src: ["stylesheets/style.css"],
               // this will become 'fakepath/public/'
               cwd: "public/"
            },
            {
               // Each string will be evaluated by glob :O
               // SASS is also supported!?!
               src:['source/*.css', 'source/*.scss']
            }
         ]

      }
   }

Mounted files like public/stylesheets/style.css will no longer output as stylesheets/style.css, it will be loaded as optional/fake/mount/directory/stylesheets/style.css.

In some cases you may want to force assets to be loaded from absolute paths. This can be acheived by simply tacking on absolute:true, this does not require files to mounted.

SASS

SASS .scss files are supported. In debug mode these will be recompiled every time the asset is requested. When in production they will be compressed and minifed into one larger file along with any other sources you may have.

asset import assets

glob node-sass uglify-js uglifycss

@everything-registry/sub-chunk-1172 @zalastax/nolb-asse

9 years ago

9 years ago

9 years ago

9 years ago