nginx-lesscss

  • P2_598690
    了解作者
  • 8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-08 08:08
    上传日期
使用 nginx/lua 进行服务器端处理 整个事情开始于服务器端 LESS -> CSS 转换器。 然后我添加了 SASS 和 SCSS。 我不会对自己撒谎,我想我会及时添加其他几个转换器。 现在,名单如下: LESS - 使用 npm/less 转换器( npm install -g less ) SASS 和 SCSS - 使用 ruby​​ gem ( gem install sass ) ES6 到 ES5 - 使用 npm/es6-transpiler 或 npm/babel ( npm install -g es6-transpiler/babel ) 随意建议您想在服务器端转换的任何其他内容。 ES6 转译注意事项 通常,转译器很慢。 一个简单的测试文件在我的开发服务器上需要大约 700-800 毫秒,es6-transpiler 和 babel 表现更差,大约
nginx-lesscss-master.zip
  • nginx-lesscss-master
  • scss.conf
    1.7KB
  • test
  • test.es6
    260B
  • test_error.es6
    261B
  • test.sass
    211B
  • test.scss
    239B
  • test.less
    239B
  • less.conf
    1.7KB
  • sass.conf
    1.7KB
  • README.md
    5.5KB
  • es6.conf
    1.8KB
内容介绍
# Server side processing with nginx/lua This whole thing started as a server-side LESS -> CSS converter. And then I added SASS and SCSS. I will not lie to myself and I think I will add a couple of other converters in time. Right now, the list is as follows: * LESS - using npm/less converter (`npm install -g less`) * SASS and SCSS - using ruby gem (`gem install sass`) * ES6 to ES5 - using npm/es6-transpiler or npm/babel (`npm install -g es6-transpiler/babel`) Feel free to suggest any other thing you'd like to convert on the server side. ## Note on ES6 transpiling Generally the transpilers are quite slow. A simple test file needs about 700-800ms on my dev server with es6-transpiler and babel performed worse, with about 1100ms. As such it is not *very* usable. Transpiler speeds may/will improve in the future, but until then be mindful about which transpiler you use, and try to stick with the faster ones. ## Caching The settings here don't perform any caching. Due to the nature of less/css/* files, it is also impossible to add a caching layer that would be fully aware of dependencies outside of your main entry file. In the case of less it would mean every other less source file, and image resources which could be loaded by mixins like `image-width`. The main strategy of the configs is to provide missing nginx CGI functionality via the LUA extension. As such, caching is not the main objective of this project and any output is generated on the fly. It is also a good reason why this shouldn't be used in production, but only development environments (where feasible). ## Motivation behind the project In general, writing LESS/SASS and ES6 gives you some aesthetic and practical benefits. An accepted practice is to generate the CSS/JS and other files, minify them and deploy them in production. __The same should apply also for development.__ I asume that some of you are generating your files with `lessc index.less > index.css` or something similar, and are looking for a better solution. You are very much familiar with the pain points of generating these files and what suffering it brings. You really should skip a few solutions which are better, but have other pitfalls. * Editors/IDE include build hooks to generate css from less/sass ([Sublime Text](https://github.com/timdouglas/sublime-less2css)) * Monitor file changes and run conversions ([Grunt](https://github.com/gruntjs/grunt-contrib-less)) * Client side dependencies like `less.js` take care of rendering less in the browser All of these are quite hack-ish ways to do what the server should be doing for you. You want to have your development environment as close as possible to the production environment. Sure, you will still generate css and javascript files in the production - but should you adapt your development process to include build hooks in your editors, client side dependencies which might be out of date, and generally make developers lives harder? The only difference between development and production in this case should be only the extension of the file you're loading in the browser. Load `.less`, `.sass` and other files in development, and load `.css` and other in production. 1. Only version and keep source files on disk (no generated files) Most tools just generate additional files in the same folders. This way main.less becomes main.css and so on. It causes valuable time to the developer to exclude these files from source control, and to pay attention not to open and edit the wrong file. 2. The files might differ from developer machine to other dev machine Converting the files on the server side actually simplifies the development process in teams. You can be sure that correct versions of software are being used, you can use server-side features not available in browsers, and you don't have to keep developers up to date with more and more client side dependencies. 3. Use advanced features not available in browsers With ES6 to ES5 transpiler it's possible to develop with next generation JavaScript language syntax. Using LESS you can use the `image-width` and other mixins which are not available in browsers. In theory you can use resources that are not available on the client side - most notably, databases. Server-side processing is nothing new. Perl has been doing it for years, and so has PHP, python, ruby and a plethora of other programming languages. Since there is a distinct lack of support for LESS, SASS and currently even ES6 in any of the top-tier browsers, I see a solution for it by using the same approach as with programming languages. In practice, any script than converts X to Y can be run on server side. ## Ok, you convinced me - what do I need? You need: - nginx compiled with LUA support - lua-socket extension (not critical, can be excluded if you're willing to modify the configs) - converter scripts (less, sass, es6toes5,...) - various selection of the following: `node`, `npm`, `ruby`, `gem`. Use the provided less/sass/scss/es6.conf in nginx (copy it to `/etc/nginx/conf.d` perhaps), restart your nginx instance, and use less/scss/sass/es6 files in your browser, like you would with css files. Edit them, save them, and refresh your pages. ``` <link href="/css/main.less" rel="stylesheet"> <link href="/css/main.sass" rel="stylesheet"> <link href="/css/main.scss" rel="stylesheet"> <script src="/js/main.es6"></script> ``` ## Thanks You are great if you read all this instead of just using the code. I'm sorry for ranting so much. Send me an email/paypal at black@scene-si.org if you feel thankful.
评论
    相关推荐
    • nginx-lua-GraphicsMagick
      教你如何搭建一个图片切割和缩放的服务 1.搭建GraphicsMagick服务 2.配置nginx 3.修改Lua脚本 详情见文档
    • lua-nginx游乐场
      lua-nginx游乐场
    • Nginx编译安装+Lua组件
      自己搭建的Nginx服务,包含所有nginx的配置文件,注明了文件中的修改项。此包中包含了Nginx1.11.3和upstream组件的tar包和Lua模块包。需要编译安装。分享给需要的朋友。
    • nginx配置lua所需组件
      nginx配置lua所需组件
    • lua-nginx-16
      lua支持nginx的插件。版本是16的源码包。支持缩略图支持
    • lua-nginx-module-master.zip
      lua-nginx-module-master,nginx编译lua模块必需文件lua-nginx-module
    • lua+nginx动态更新配置.zip
      lua+nginx动态更新配置.zip
    • lua-resty-core, 新的基于 lua Nginx 模块的API.zip
      lua-resty-core, 新的基于 lua Nginx 模块的API 电子邮件名称lua-resty-core - 用于ngx_http_lua_module和/或者ngx_stream_lua_module的基于new的Lua table-内容名称状态概要说明描述先决条件API实现了r
    • phalanx:Lua-Nginx微型框架
      目前,nginx-lua的微框架主要旨在生产轻量级,高吞吐量的api TL; DR; local app_router = require ( " phalanx.router " ): new () local route = require ( " phalanx.route " ) app_router: add ( ' book ' , ...
    • lua-nginx插件
      nginxlua支持的插件版本。0-9-14的版本。让nginx的支持lua脚本