jacksontian / loader

Assets loader.

loader

Node静态资源加载器。该模块通过两个步骤配合完成，代码部分根据环境生成标签。上线时，需要调用minify方法进行静态资源的合并和压缩。

Usage

Installation

$ npm install loader

Example

Controller:

res.render(tpl, {
  Loader: require('loader')
});

View:

<%- Loader("/assets/scripts/jqueryplugin.js", "/assets/styles/jqueryplugin.css")
  .js("/assets/scripts/lib/jquery.jmodal.js")
  .js("/assets/scripts/lib/jquery.mousewheel.js")
  .js("/assets/scripts/lib/jquery.tagsphere.js")
  .css("/assets/styles/jquery.autocomplate.css")
  .done(assetsMap, prefix, combo) %>

在loader-builder/loader-connect/loader-koa的支持下，.js方法也可以加载.coffee、.es类型的文件，.css方法可以加载.less、.styl文件。

环境判别

环境判别由done方法的第三个参数决定，如果传入combo值，将决定选用线下版本还是线上版本。如果不传入第三个参数，将由环境变量。如下代码实现：

process.env.NODE_ENV === 'production'

如果不传入combo，需要设置环境，通过以下代码实现：

$ # 生产环境
$ export NODE_ENV="production"
$ # 开发环境
$ export NODE_ENV="dev"

可切换进example目录运行示例代码：

$ npm start

线上输出

线上模式将会输出合并和压缩后的地址，该地址从Loader构造参数中得到。

<script src="/assets/scripts/jqueryplugin.md5_hash.js"></script>
<link rel="stylesheet" href="/assets/styles/jqueryplugin.md5_hash.css" media="all" />

如果你有CDN地址，可以传入prefix参数，使得可以一键切换到CDN地址上，实现网络加速。以下为结果示例：

<script src="http://cnodejs.qiniudn.com/assets/scripts/jqueryplugin.md5_hash.js"></script>
<link rel="stylesheet" href="http://cnodejs.qiniudn.com/assets/styles/jqueryplugin.css" media="all" />

线下输出

线下模式输出为原始的文件地址。

<script src="/assets/scripts/lib/jquery.jmodal.js"></script>
<script src="/assets/scripts/lib/jquery.mousewheel.js"></script>
<script src="/assets/scripts/lib/jquery.tagsphere.js"></script>
<link rel="stylesheet" href="/assets/styles/jquery.autocomplate.css" media="all" />

构建

上文没有提及的重要值是assetsMap，这个值需要通过构建产生，类似如下格式：

{
  "/assets/index.min.js":"/assets/index.min.ecf8427e.js",
  "/assets/index.min.css":"/assets/index.min.f2fdeab1.css"
}

如果需要线上执行，需要该对象的传入。而该对象需要通过以下构建脚本（loader-builder）来生成：

$ builder <views_dir> <output_dir>
$ # 或者
$ ./node_modules/loader-builder/bin/builder <views_dir> <output_dir>

以上脚本将会遍历视图目录中寻找Loader().js().css().done()这样的标记，然后得到合并文件与实际文件的关系。如以上的assets/index.min.js文件并不一定需要真正存在，进行扫描构建后，会将相关的js文件进行编译和合并为一个文件。 并且根据文件内容进行md5取hash值，最终生成/assets/index.min.ecf8427e.js这样的文件。

遍历完目录后，将这些映射关系生成为assets.json文件，这个文件位于<output_dir>指定的目录下。使用时请正确引入该文件。具体请参见example目录下的代码示例。

流程

API

请参见API文档。

License

MIT license

loader's Issues

app.use(Loader.less(__dirname)) 为什么最新版本总提示找不到 less 方法呢

0.1.4 版本可以这么用， 2.0.0 版本不行，我用的 express，文档上也没有说明，请问到底怎么用啊？

改进建议

最近在翻新 nodeclub，对于 loader 有以下几点改进建议

1. 使用 loader 时，调用 done() 即可，而非 .done(assets, config.site_static_host, config.mini_assets)

因为这三个参数基本在每个调用 loader 的地方都是一样。
这三个参数都应在初始化 loader 时有个默认值，需要覆盖时再传参。

1. 不必 make build，初始化时设定好 assets 目录and文件名，需要 build 的目录。在 loader 初始化时，根据是否需要 minify，对需要 build 的目录整个做 md5，如果有变动，则重新 build。

难点：需要考察对需要 build 的目录整个做 md5 的效率如何。

以上你的意向如何？

less @import时会报错，运行目录没有设置，是主程序的运行目录

less文档：
less.render('.class { width: (1 + 1) }',
{
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less', // Specify a filename, for better error messages
compress: true // Minify CSS output
},
function (e, output) {
console.log(output.css);
});

lib/loader:
// 调用less将源文件内容翻译为CSS
less.render(content, function (err, css) {});
可以在此处用第二个参数指定路径信息

Loader加载less文件，builder时报异常

请问一下朴大，在Loader加载less文件时，如果less文件包含@import标签，在builder的时候会报异常，这个问题该如何解决？

请问在Jade 中 怎么调用 loader

我尝试过
Loader('http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css')
.css('/public/stylesheets/style.css')
.done(assets, config.site_static_host, config.mini_assets)

script(type='text/javascript').
Loader('http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css')
.css('/public/stylesheets/style.css')
.done(assets, config.site_static_host, config.mini_assets);

• Loader('http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css').css('/public/stylesheets/style.css').done(assets, config.site_static_host, config.mini_assets)

都不行……

node 6.0 下报错

var Loader = function (js, css) {
  if (!(this instanceof Loader)) {
    return new Loader(js, css);
  }
  var target = {};
  target[path.extname(js)] = js;
  target[path.extname(css)] = css;

这里面的 path.extname 现在不接受 undefined

使用loader 引入less文件有bug

使用loader 引入less文件有bug。当less文件中包含导入@import XXX 此类代码时候，loader工作不了。