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                                 

                



                       




       


你可能感兴趣的:(Sails.js,交流学习)