less-file

Middleware for less with npm and static assets support

less-file

Middleware for less & express with bonus npm support, sane & simple handling of static assets and sensible defaults for the ultimate in ease of use.

In addition to the basics, less-file also comews witht he following features out of the box:

  • less extended with @import (npm) "package-name"syntax
  • static assets like fonts and images automatically taken care of
  • source-maps are automatically enabled for debugging
  • minification automatically enabled in production
  • gzip automatically enabled in production
  • etags for caching automatically supported

If you think I've missed something, be sure to open an issue or submit a pull request.

If you find it useful, please support me on gittip

Usage

If you have installed twbsvia npm install twbs --saveyou can use the following less file:

@import (npm) "twbs";

//any custom less stuff here

Along with the server:

var less = require('less-file');
var express = require('express');
var app = express();

// serve CSS for '/style/index.less' at '/style/bundle.css'
app.use('/style', less(__dirname + '/style/index.less'));

app.listen(3000);

Then when you fetch http://localhost:3000/style/bundle.cssyou will get a CSS bundle, but any url("./file.png")style references in the less files will be properly resolved as relative addresses, givena unique ID and then served up from /styleso you don't need to manually mess with anything to get twitter bootstrap's glyphicon fonts to just work.

Compatible npm modules

This location will list npm modules that are known to be fully compatible with less-file:

  • twbs- a tiny modificaion of Twitter's Bootstrap to support both browserify and less-file properly.

If you want to make your own module compatible with less-file, you can just leave an index.lessor index.cssfile in the root of a package and then publish it to npm. Alternatively you can set the "style"field in your package.json file to override that path.

API

less('filename', options) => express middleware app

Less-file takes a filename and some options and returns an express web server. It serves up the css file at /bundle.cssso if you do:

app.use('/style', less(__dirname + '/style/index.less'));

you can request the file from /style/bundle.css

Options

The optionspassed to each middleware function override the defaults specified in settings.

Setings has two properties settings.productionand settings.developmentwhich specify the default settings for each environment. The current environment is specified by settings.modeand defaults to process.env.NODE_ENV || 'development'

Production defaults:

production.cache = true; // equivalent to "public, max-age=60"
production.minify = true;
production.gzip = true;
production.debug = false;

To update:

less.settings.production('cache', '7 days');

Development defaults:

development.cache = false;
development.minify = false;
development.gzip = false;
development.debug = true;

To update:

less.settings.development('gzip', true);

cache

The cache setting determines how long content can be cached in the client's web browsers (and any caching proxies) and whether or not to cache bundles server side. Any value other than false will result in them being cached server side.

  • If cache is truethe client will recieve Cache Control of "public, max-age=60", which caches for 60 seconds.
  • If cache is a string in the form accepted by msit becomes: "public, max-age=" + (ms(cache)/1000)
  • If cache is a number, it is treated as being in milliseconds so becomes: "public, max-age=" + (cache/1000)
  • If cache is an object of the form {private: true || false, maxAge: '10 minutes'}it becomes the apropriate string.
  • If cache is any other string it will be sent directly to the client.

N.B. that if caching is enabled, the server never times out its cache, no matter what the timeout set for the client.

minify

If minify is true, less will be told to compress its output. This automatically disables debug.

gzip

If gzipis true, GZip will be enabled when clients support it. This increases the memory required for caching by aproximately 50% but the speed boost can be considerable. It is trueby default in production.

debug

If debugis true, a source map will be added to the code. This is very useful when debugging. debugis falseby default in produciton.

License

MIT

Repository

https://github.com/ForbesLindesay/bootstrap-middleware.git


上一篇:pull-request
下一篇:gethub

相关推荐

  • 详解微信小程序 wx.uploadFile 的编码坑

    编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息.然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间. 这里分享一个和编码有关的坑,主要是由于...

    3 年前
  • 解决: 图片上传File对象不兼容IE

    最近做公司业务, 上传图片出问题了~ 首先是要求前端传递的图片名称不能是中文 ??? image.png(https://img.javascriptcn.com/5a5e9c0d107b25cd9...

    6 个月前
  • 节点和错误:emfile,打开的文件太多

    节点和错误:emfile,打开的文件太多...

    2 年前
  • 美化文件上传按钮自定义input file样式

    input file的样式不能直接用css来美化,我们可以曲线救国,把input file的透明度降低为0,相当于把这个控件隐藏了,实际上只是透明度为0,还是存在的,然后把div套上去,让div充当f...

    9 个月前
  • 用file标签实现多图文件上传预览

    js 代码: HTML代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持JavaScript中文网!...

    3 年前
  • 用bootstrap file input 上传图片

    项目中经常会遇到文件上传,管理多文件上传过程的需求。 bootstrap file input组件算是不错的解决方案 图片描述(https://img.javascriptcn.com/adcd17...

    2 年前
  • 浅谈$_FILES数组为空的原因

    今天做上传的文件时候,打印$files总是为空,查阅了下资料。 发现是 maxfileuploads=0 知道了原因 以上这篇浅谈$FILES数组为空的原因就是小编分享给大家的全部内容了,希望...

    3 年前
  • 服务人员抛出一个网::err_file_exists错误?

    服务人员抛出一个网::errfileexists错误?...

    2 年前
  • 最好用的Bootstrap fileinput.js文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。 一、demo (https://img.javas...

    3 年前
  • 文件上传File格式转为Blob格式

    最近项目开发中涉及到文件上传功能,使用的是七牛的服务。查看七牛文档发现文件上传格式为blob,而本地添加上传文件时获取到的是file格式,因此需要将file转换为blob,具体转换方法如下: ...

    10 个月前

官方社区

扫码加入 JavaScript 社区