Sails.js 之 concepts Assets

Sails.js 我从没用过,只学过一点nodejs的皮毛。还好Sails.js的文档比较详细,可都是英文的。我用我自己的语言做一下翻译,对应的Sails.js版本是v0.11

Assets

概览

Assets是指你像让外界访问的静态文件,例如js,css,images. 在Sails程序中Assets文件在assets文件夹中,在启动程序的时候,这些文件会被处理,同步到.tmp/public中。.tmp/public 里的内容是Sails实际使用的,就好比熟悉的express的public文件夹,或者apache服务中的www文件夹。这个过度步骤使得Sails能够预处理预编译客户端要使用的资源,就像LESS, CoffeeScript, SASS, spritesheets, Jade templates。

静态中间件

在幕后,Sails使用express的静态中间件来处理assets。可以在/config/http.js中配置这个中间件。

index.html

就像大多数web服务端一样 sails 也遵守使用index.html。举个例子,在新的Sails项目中创建了assets/foo.html,它对应的地址就是http://localhost:1337/foo.html。如果创建了assets/foo/index.html,那么 http://localhost:1337/foo/index.html 和 http://localhost:1337/foo 能够被访问。

优先级

静态中间件比Sails的router优先级要低,这一点非常重要。如果自定义了一个router, 和一个assets路径冲突了,那么这个assets则不能被访问。例如assets/index.html被创建了,但同时定义了router ‘/‘:‘FooController.bar‘,那么这个router优先级更高。

默认的任务

概览

Assets 是默认由 Grunt 任务配置集成的,这样使得你的程序更加一致,更加接近生产。

整个前端 Assets 工作流是完全可定制的虽然它提供了一些默认的任务,开箱即用。帆很容易地配置新任务,以满足您的需要。

这里有几件Sails的默认Grunt配置给予的帮助:

自动Less编译

自动JST编译

自动Coffeescript编译

可选的自动Assets注入、 缩小和串联

创建一个public文件夹

监视和同步文件

为生产优化Assets

默认的Grunt任务行为

下面是Grunt任务行为描述:

清理

Grunt任务为配置去做清理.tmp/public/。

注:这个功能是吧.tmp/public/下的所有文件删除掉。

coffee

将 coffeeScript 文件从资产/js/入 Javascript 编译,将它们放置到.tmp/public/js/ 目录。

concat

合并 javascript 和 css 文件,并保存合并后的文件在.tmp/public/concat/ 目录中。

复制

dev task config复制所有的目录和文件,除了 coffeescript 和少文件,从assets件夹到.tmp/public/ 目录。

build task config将复制所有的目录和文件从.tmp/公共目录到 www

css压缩

压缩 css 文件并将它们放到.tmp/public/min/ 目录。

JST

预编译.jst 文件中的模板。(它是 HTML 模板文件,把他们变成小的的 javascript函数)。这可以加快模板呈现在客户端,并降低带宽使用率。

Less

编译到 CSS 文件。只有 assets/styles/importer.less 被编译。这允许您控制导入其他样式表之前你的依赖关系、 mixin、 变量、 重置等。

sails-linker

自动注入 javascript 文件 <script>标签和 <link>标签的 css 文件。此外会自动将链接一个包含预编译的模板中使用 <script>标记的输出文件。应该注意的是该脚本和样式表注,只是在包含 <!--SCRIPTS--> 文件 <!---> 脚本结束和/或 <!--STYLES--> <! — — 样式结束--> 标签。这些都列入新的风帆项目中的默认views/layout.ejs 文件。如果你不想使用链接器为您的项目,您可以简单地删除这些标记。

sync

它保持目录同步。它非常类似于Grunt copy,但试图只复制那些文件已实际更改。它专门同步文件从资产 /.tmp/公共文件夹/覆盖已存在的任何东西。

uglify

压缩js文件

监视

运行预定义的任务,每当有文件添加、 更改或删除。监视assets文件 / 文件夹改变,然后重新运行适当的任务 (如: less 和 jst 编译)。这允许您查看对您的assets反映在您的应用程序而不必重新启动sails服务器的更改。

Task Automation

概览

目录tasks 包含一整套 Grunt 任务和配置。

Tasks是主要用于捆绑的前端assets,(比如样式表、 脚本与css),但他们也可以用来自动执行各种重复开发事务、 从 browserify 编译数据库迁移。

Sails为方便起见默认捆绑一些任务,但是有还有上百个插件可供选择。如果有人没有建立你的需要的,你可以发布自己的Grunt插件到npm.

Asset pipeline

Asset pipeine是组织的assets注入到view,它可以在 tasks/pipeline.js 文件中找到。配置是简单的,使用Grunt task file configuration 和 通配符/glob/图示模式。他们分成三个部分。

CSS 注入

这是css 文件的数组要被注入到你的 html 作为 <link>标签 。这些标记将注入之间 <!--STYLES--> <! — — 样式结束--> 在任何视图中显示的注释。

JS注入

这是一个数组 Javascript 文件,获取注入你的 html 作为 <script>标签。这些标记将注入之间 <!--SCRIPTS--> <! — — 脚本结束--> 在任何视图中显示的注释。文件注入的顺序是他们在数组中的顺序 (即你应该放置路径的依赖项文件,在依赖于他们之前。)

模板文件注入

这是一个放在 jst.js 文件中的html 文件数组将编译为一个 jst 函数 。此文件然后获取作为注入的在 <!--TEMPLATES--> 的 <script>标记 <! — — 模板结束--> 在你的 html 注释。

Task configuration

配置好的任务是你的 Gruntfile规则集。他们是完全可定制的和位于tasks/config/目录。你可以修改、 省略,或替换任何这些繁重任务,以适合您的要求。您还可以添加你自己Grunt任务-只是要配置新的任务中,这个目录中添加一个 someTask.js 文件然后登记它与相应的父任务 (请参阅 tasks/register/*.js 中的文件)。请记住,Sails配备一套有用的默认值都为了让你的任务和使用不需要配置运行。

Task triggers

在开发模式下,Sails运行默认任务 (tasks/register/default.js)。此编译Less,CoffeeScript和客户端的 JST 模板,然后它们会自动链接到您的应用程序的动态视图和静态的 HTML 页面。

在生产中,Sails运行生产任务 (tasks/register/prod.js) 共享默认情况下,同样的任务,也会压缩您的应用程序的脚本和样式表。这减少了您的应用程序的负载的时间和带宽利用率。

这些任务触发器是位于tasks/register/  的文件夹。下面,你将发现Sails完整的触发器引用,和它们的命令:

sails lift

Runs the default task (tasks/register/default.js).

sails lift --prod

Runs the prod task (tasks/register/prod.js).

sails www

Runs the build task (tasks/register/build.js)  将assests生成到www文件夹

sails www --prod (production)

Runs the buildProd task (tasks/register/buildProd.js)  将assests生成到www文件夹

您可以通过指定设置 NODE_ENV 和创建任务列表中的tasks/register/具有相同名称运行其他任务。例如,如果 NODE_ENV 是 QA,帆将运行 tasks/register/QA.js,如果它存在。

另:  Sails.js 交流学习群 468455066

时间: 2024-10-29 19:09:48

Sails.js 之 concepts Assets的相关文章

老web换新枝----Sails.js移动设备的全新生产力(二)

选择 Sails.js 一个明显的 Node.js 风格.具体来讲,Sails 使用分层开发和约定优于配置(convention over configuration),这两种开发技术已被 Rails 和类似的框架普及.Sails 还集成了其他一些 Node.js 包作为关键组件,这意味着不需要从头学习该框架.另一个优势是,事实上 Sails.js 的文档在不断改进,这是任何开源项目中都要寻找的一个关键指标. 在第一部分中,重点介绍 Sails 如何实现分层开发.未来的几部分将介绍约定优于配置和

Sails.js 教程 EP2

这里说下几个基本的文件配置 1 config/local.js 这个文件是本地环境配置 config/local.js的配置:     port: process.env.PORT || 1339,     environment: process.env.NODE_ENV || 'development',       // The runtime "environment" of your Sails app is either 'development' or 'producti

与你相遇好幸运,Sails.js安装

官网: http://sailsjs.org Github:https://github.com/balderdashy/sails 开发文档: http://sailsjs.org/documentation/concepts 中文文档:https://github.com/linxiaowu66/sails-docs-zh-cn ORM组件:https://github.com/balderdashy/waterline ORM文档:https://github.com/balderdash

Node.js~sails.js~package.json的作用

回到目录 我们在sails框架进行node.js开发时,会涉及到项目的迁移,当迁移后可能你的module即丢失,这时,希望快速的安装所有的包包,可以使用下面命令 1 cd 你当前的sails项目 2 执行命令:npm install 3 说明,在当前项目里执行npm install这时,它会在查找当前目录的package.json文件,然后把包文件里的所有模块都自动安装,确实方便,这让我想起了VS里的nuget,也是可以自动还原所有包包的,设计如出一辙! 如果要为项目添加新的模块,需要先定位到当

与你相遇好幸运,Sails.js自定义responses

在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js  自定义的数据错误 >serviceSuccess.js 自定义的数据成功信息 serviceSuccess.js内容示例: module.exports = function serviceSuccess (msg,result){ var res = this.res; res.status(200); res.json({ "statu

推荐15个 Node.js 开发工具

Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些工具对于刚刚开始学习 Node.js 的新手开发者非常有帮助.如果你知道任何其他有用的 Node.js 资源,请让我们知道. 1. IO.js JavaScript I/O is an npm compatible platform that was originally based on Node.j

2015年最佳的15个 Node.js 开发工具

Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些工具对于刚刚开始学习 Node.js 的新手开发者非常有帮助.如果你知道任何其他有用的 Node.js 资源,请让我们知道. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动

node.js上除了Express还有哪些好用的web开发框架

老司机都有体会, 开发本身没有多难, 最纠结其实是最初的技术和框架选型, 本没有绝对的好坏之分, 可一旦选择了不适合于自己业务场景的框架, 将来木已成舟后开发和维护成本都很高, 等发现不合适的时候更换的成本更是令人胆颤, 数据观最早的接入层是采用ThinkPHP开发, 后来基于种种权衡后决定用node.js重制, web开发框架选型就成为首要必须慎重解决的问题, Express当然是头号映入视野的名字, 本着全面考察重点择优的原则又花不少时间简单研究对比几个主流的node.js web开发框架,

Vue.js 实践(2):实现多条件筛选、搜索、排序及分页的表格功能

与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一