asset-import

0.2.7 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i asset-import

Weekly Downloads

4

Version

0.2.7

License

MIT

Last publish

Collaborators

  • persson