• Stars
    star
    137
  • Rank 266,121 (Top 6 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 12 years ago
  • Updated about 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Assets loader.

loader Build Status Coveralls github

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

More Repositories

1

fks

前端技能汇总 Frontend Knowledge Structure
JavaScript
17,918
star
2

eventproxy

An implementation of task/event based asynchronous pattern.
JavaScript
2,965
star
3

anywhere

Running static file server anywhere / 随启随用的静态文件服务器
JavaScript
981
star
4

doxmate

文档伴侣
CSS
829
star
5

diveintonode_examples

《深入浅出Node.js》的相关代码
JavaScript
418
star
6

ping

一个您会喜欢的基于Node的Web开发框架。【学习研究所用,请勿用于生产环境】
JavaScript
387
star
7

bagpipe

Async call limit
JavaScript
320
star
8

api-doc-service

Node API Documentation Service
JavaScript
126
star
9

bufferhelper

Concat buffer correctly and easily.
JavaScript
122
star
10

drama

Mobile Web App startup framework/前身为V5
JavaScript
98
star
11

shenjs

深JS上的分享《Node Profiler》
JavaScript
69
star
12

jsconfcn2016

JavaScript
67
star
13

compiler

《编译原理》一书一个简单的语法制导翻译器(JavaScript版本)
JavaScript
55
star
14

ghost

Node Front-end automation test framework
JavaScript
54
star
15

httpx

http(s) module with power.
JavaScript
46
star
16

unittesting

单元测试示例模块
JavaScript
40
star
17

stone-lang

《两周自制脚本语言》学习
Java
36
star
18

para

Parallel README
JavaScript
32
star
19

diveintonode_figures

《深入浅出Node.js》书稿配图
28
star
20

using_list

What companies are using Node.js in China
28
star
21

vue2js

Compile a .vue file to .js file
JavaScript
26
star
22

dependparser

自动分析项目中的依赖项
JavaScript
25
star
23

jacksontian.github.com

My homepage http://html5ify.com
CSS
24
star
24

modulelint

modulelint检测您的模块是否优秀
JavaScript
23
star
25

markbook

用Markdown写书。
CSS
22
star
26

o_o

(o_o):HTTP/HTTPS代理工具
JavaScript
22
star
27

loader-builder

Loader's builder
JavaScript
22
star
28

limitablemap

The limitable map, for avoid memory leak issue.
JavaScript
21
star
29

boolex

Bool Expression
JavaScript
21
star
30

kimi

The Node.js client and CLI for Moonshot AI(Kimi).
JavaScript
20
star
31

diveintonode_site

《深入浅出Node.js》书稿配套网站
18
star
32

slidemate

JavaScript
17
star
33

node_ci

A NodeJS MVC Framework (Like CodeIgniter).
JavaScript
15
star
34

ipod

ipod
JavaScript
15
star
35

sync_package

Sync NPM package from remote registry to local.
JavaScript
14
star
36

itodo

TODO list
JavaScript
14
star
37

plusplus

I need a better Underscore in Node.js
JavaScript
13
star
38

re-captcha

recaptcha验证码中间件
JavaScript
13
star
39

doxco

Documentation generator, docco for dox
CSS
13
star
40

waterfall

See Demo http://jacksontian.github.com/waterfall/
JavaScript
12
star
41

nounou

Node.js process deamon.
JavaScript
12
star
42

spritemate

Sprite Mate
JavaScript
12
star
43

tensorflow-node

JavaScript
10
star
44

fawave_mobile

JavaScript
10
star
45

kitx

A Node.js toolkit.
JavaScript
10
star
46

memeda

JavaScript
9
star
47

leakchecker

A tool for check the memory leak.
JavaScript
9
star
48

jsconfcn2017

8
star
49

gesture

触屏手势库,基于Winter和Zepto.js完成
JavaScript
8
star
50

nodejsctl

Shell
8
star
51

yixin

易信公众平台SDK(Node)。请右转使用微信模块:
8
star
52

dingbot

DingTalk Group Bot for Node.js
JavaScript
8
star
53

landscape

Tiny front-end framework.
JavaScript
7
star
54

eventbase

EventBase
JavaScript
7
star
55

hitaxi

我要叫车 [我要车-乘客][我有空-司机]
JavaScript
7
star
56

ebnf-parser

JavaScript
6
star
57

v

可视化资料库
5
star
58

hookx

Hook(x) with Power.
JavaScript
5
star
59

nakupenda

Learning OS
C
5
star
60

loader-connect

Loader middleware for connect
JavaScript
5
star
61

pool

Pool Stream
JavaScript
5
star
62

forward

Forward request
JavaScript
5
star
63

iquery

select('*').from('table').where('1 = 1').groupBy('column').orderBy('count DESC').limit(0, 100)
JavaScript
5
star
64

skyline

JavaScript
5
star
65

_footprint

A JavaScript template
JavaScript
4
star
66

context-ex

Context Expression
JavaScript
4
star
67

alpha

Node API search
JavaScript
4
star
68

mah-jong

JavaScript
4
star
69

JacksonTian

3
star
70

protobuf2

JavaScript
3
star
71

writing

Press markdown
CSS
3
star
72

v5_weibo

JavaScript
3
star
73

iwalk

Walk dictionary
JavaScript
3
star
74

V5UI

UI widget library
JavaScript
3
star
75

loader-koa

Loader for Koa
JavaScript
3
star
76

streamx

Ultimate stream for ES6
JavaScript
3
star
77

gyp_mirror

Python
3
star
78

readx

Read stream like sync call
JavaScript
3
star
79

rtf-parser

Rich Text Format
3
star
80

tinywork

Just do a little tiny work for Promises
JavaScript
3
star
81

gocov

A better test coverage reporter than go tool cover.
JavaScript
3
star
82

panel

一个可以替代iScroll的面板
JavaScript
2
star
83

Understanding-Computation

《计算的本质》学习
JavaScript
2
star
84

elemento

WebComponent
JavaScript
2
star
85

suncity

LBS App. Build with NodeJS & MongoDB. Named as SunCity.
JavaScript
2
star
86

math_for_kids

数学学习小项目。
HTML
2
star
87

cpu_alert

高 CPU 占用进程告警器
JavaScript
2
star
88

node-webdav-client

CalDAV client
JavaScript
2
star
89

gogo

HTML
2
star
90

footprint

A very very small logger.
JavaScript
2
star
91

columnpress

Markdown blog
Smarty
2
star
92

tallybook

我的记账本应用
JavaScript
2
star
93

user-agent

User Agent String for mock client
JavaScript
2
star
94

tiny-function

JavaScript
2
star
95

julia-set

JavaScript
1
star
96

doxmategen_site

Used host doxmate documents
HTML
1
star
97

koa-forward

forward for koa
JavaScript
1
star
98

arch_mate

JavaScript
1
star
99

little.js

http://www.crockford.com/javascript/little.html
JavaScript
1
star
100

super-init-myegg

JavaScript
1
star