Linner介绍、安装及简单Demo

Linner前端项目阐述

项目结构

通过linner创建的项目结构如下：

├── app
│   ├── components
│   │   └── dropdown
│   │       ├── view.coffee
│   │       ├── view.hbs
│   │       └── view.scss
│   ├── images
│   │   └── logo.png
│   ├── scripts
│   │   └── app.coffee
│   ├── styles
│   │   └── app.scss
│   ├── templates
│   │   └── welcome.hbs
│   └── views
│       └── index.html
├── bin
│   └── server
├── config.yml
├── public
├── test
└── vendor

app 用户编写代码的地方

​ components存放项目的组件类文件

​ images存放项目的图片文件

​ scripts存放项目的JavaScript文件，当然CoffeeScript文件也可以

​ styles存放项目的样式文件

​ templates存放项目的前端模板文件

​ views存放项目的后端模板文件，也是前端页面的入口文件存放处

bin存放启动前端项目命令的文件

config.xml整个项目的配置文件

public项目打包后的文件位置，包含部署前端需要的所有文件

test可以写一些单元测试用例测试开发好的功能

vendor项目需要的第三方组件库全部放在该文件夹，例如：Jquery、Bootstrap等

项目阐述

组件

每个前端项目的不同页面之间都会有很多相同逻辑的模块，我们可以将这部分内容抽取出来，做成可复用的模块，放到app/components里面。

我们也可以将每个页面中间操作的部分放到app/components里面，每个模块都可以包含js文件、样式文件以及前后端模板，然后通过app.coffee进行初始化所有的组件。

图片、CSS、JS文件合并

linner可以将很多张图片合并成一张大图片，项目中可以用CSS的background来获取需要的图片，这样可以减少由图片导致的HTTP请求，提升网站访问速度；

同样，也可以将CSS文件、JS文件进行合并，减少文件的数量，这样页面在初始化的时候，就可以减少请求次数，可以有效的加快页面渲染的速度。

仓库管理

通过 bundles 来管理远端依赖，在项目中可以非常方便的引入一些著名的第三方库。 如 jQuery，Bootstrap等。

依赖可以规定多个版本，当需要升级版本时，可以更改 version 与 url 在工具下次启动时便可以拉取新版本的依赖。如果希望依赖一直为最新状态，可以将 version 设置为 master 这样工具会在每次启动时都获取最新的文件。

实时监控文件变化并编译

可以实时监控到项目内文件的变动，同时重新执行整个工具的编译逻辑。这样在我们的开发过程中，可以尽最大程度的提升开发效率。有一点需要注意，在项目开发过程中需要使用 linner watch ,这样在浏览器中，我们还可以对逻辑比较负责的js文件进行断点操作。

config.yml文件配置详解

paths:
  app: "app"
  test: "test"
  public: "public"
groups:
  scripts:
    paths:
      - app/scripts
    concat:
      "/scripts/app.js": "app/**/*.{js,coffee}"
      "/scripts/vendor.js": "vendor/**/*.{js,coffee}"
    order:
      - vendor/jquery-1.10.2.js
      - ...
      - app/scripts/app.coffee
  styles:
    paths:
      - app/styles
    concat:
      "/styles/app.css": "app/styles/**/[a-z]*.{css,scss,sass}"
  images:
    paths:
      - app/images
    sprite:
      "../app/images/icons.scss": "app/images/**/*.png"
  views:
    paths:
      - app/views
    copy:
      "/": "app/views/**/*.html"
  templates:
    paths:
      - app/templates
    precompile:
      "/scripts/templates.js": "app/templates/**/*.hbs"
modules:
  wrapper: cmd
  ignored: vendor/**/*
  definition: /scripts/app.js
sprites:
  url: /images/
  path: /images/
  selector: .icon-
revision: index.html
bundles:
  jquery.js:
    version: 1.10.2
    url: http://code.jquery.com/jquery-1.10.2.js
  handlebars.js:
    version: 1.0.0
    url: https://raw.github.com/wycats/handlebars.js/1.0.0/dist/handlebars.runtime.js

paths 表示当前工具做监视的文件系统目录

groups 区分了不同的组，每个组可以有一个名字。在组内部的声明中需要指定当前组的 paths，然后可以指定一系列的操作原语，包括：concat order copy precompile sprite 等

modules 定义了需要被 CMD 包装的文件路径，以及包装定义的头文件连接位置

sprites 定义了图片 sprites 的一些生成规则，例如以 .icon- 开头来生成 CSS 列表，这样用户便可以以这样的 CSS 选择器来直接生成样式。

revision 定义了需要被加载 rev 的文件，用以 md5 的文件名来替换旧文件名

bundles 定义了项目的依赖关系，项目可以依赖很多第三方的项目，可以自定义版本号。 如果需要每次启动都更新最新版本的依赖，可以将 version 设置为 master

linner常用命令

# 使用 Linner 创建项目结构
linner new webapp
# 在项目开发过程中使用linner
linner watch
# 退出linner
Ctrl+C
# 打包前端项目进行发版
linner build
# 清空打包的资源文件
linner clean

最后，附上业界大厂、大咖们总结的前端网站优化标准，我们在日常开发的时候，可以尽量避免跌入比较低级的坑，哼哧哼哧半天，才爬出来（自动点头.png）

1. 尽可能减少 HTTP 请求数
2. 使用 CDN（内容分发网络）
3. 为文件头指定 Expires 或 Cache-Control，使内容具有缓存性
4. 使用 Gzip 压缩内容
5. 把 CSS 放到顶部
6. 把 JavaScript 放在底部
7. 避免在 CSS 中使用 Expressions
8. 把 JavaScript 和 CSS 都放到外部文件中
9. 减少 DNS 查找次数
10. 压缩 JavaScript 和 CSS
11. 避免重定向
12. 剔除重复的 JavaScript 和 CSS
13. 配置 Etags
14. 使 AJAX 缓存

推荐阅读：
Linner介绍、安装及简单Demo
更多文章请扫描下方二维码关注公众号获取，或者微信搜索【HughPro】关注