Assets loader.
JavaScript HTML Makefile CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
figures
lib
sources
test
.gitignore
.jshintrc
.npmignore
.travis.yml
MIT-License update license Sep 18, 2015
Makefile Fuck mocha Mar 27, 2015
README.md
index.js
package.json

README.md

loader Build Status Coverage Status

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