通过thinkjs的middleware将less作为中间件进行处理

通过thinkjs的middleware将less作为中间件进行处理

月光魔力鸭

2019-12-10 16:00 阅读 107 喜欢 1 less middleware thinkjs

最近在折腾的时候又想写less了,但是换框架了,成了thinkjs,考虑到开发阶段一直编译编译less的情况..最终根据middleware的特点实现了一个超级简单的less中间件。

作用很简单,我想实现的目标也很简单,在html中正常写css链接,当时请求会被less中间件拦截,然后根据路径查找less文件,并进行编译,最终写入到目标css文件中。

这个只在开发模式下使用,生产环境不需要使用。主要就是方便使用less编写样式。 https://cdn.pixabay.com/photo/2019/12/04/23/34/sheep-4673941__340.jpg

think-less

A less middleware for thinkjs 3.0 on development enviroment. Compiler less file to css when request xxx.css file in pages.

Installation

npm install think-less --save-dev

API

Modify /src/config/middleware.js .The less middleware should before resource middleware.

const less = require('think-less');
const path = require('path');
const isDev = think.env === 'development';

module.exports = [
    {
        handle: less,
        enable: isDev ? true : false,
        options: {
            root: path.join(think.ROOT_PATH, 'res'),
            target: path.join(think.ROOT_PATH, 'www'),
            lessOptions: {
                paths: [path.join(think.ROOT_PATH, 'res')],
                compress: true
            }
        }
    }
]

Options

源码

代码也很简单,直接使用的less的模块进行编译,如下:

//thinkjs middleware of less compiler
const less = require('less');
const path = require('path');
const fs = require('fs');
const mkdirsp = require('mkdirsp');

module.exports = (options,app)=>{
    return async (ctx,next)=>{
        let extname = path.extname(ctx.path);
        if(extname.toLowerCase() != '.css'){
            return next();
        }
        let filePath = path.join(options.root,ctx.path.substr(0,ctx.path.indexOf('.css'))+'.less');
        let targetPath = path.join(options.target,ctx.path);
        if(!fs.existsSync(filePath)){
            return next();
        }
        let content = Buffer.from(fs.readFileSync(filePath)).toString('utf8');
        try{
            await mkdirsp(path.dirname(targetPath));
            let out = await less.render(content,options.lessOptions)
            fs.writeFileSync(targetPath,out.css);
        }catch(e){
            return Promise.reject(e);
        }
        return next();
    }
}

转载请注明出处: https://chrunlee.cn/article/think-js-less-middleware.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
最近家里正在装修,实在是不知道怎么做,之前看好好住APP上有不少设计的图,部分还挺好看。。就去看了下有没有WEB端,结果还真有,就有了下文,我抓了几万张图片,然后根据关键字进行分类,从里面找心仪的设计。
开始入手webpack ,直接看的官方文档和demo,对于自动刷新这部分还是希望通过express 加载插件来控制,但是文档没有提供,经过参考github上其他高玩的套路,最终整理了一个基础的配置版本。
通过nodejs来进行爬取页面的内容,这里简单试试做个小任务..
通过imap 来接收邮箱新邮件,类似客户端系列,不过比较简单的,目前只有新邮件,后续也可以通过这个来做一个自己的邮件客户端。
通过pm2来实现nodejs应用的集群,不过我之前没做session共享,导致.. 登录不上啊 啊啊啊,无奈,又重新对redis进行了集成。
关于js的编译和压缩,之前做过一个小工具了,主要就是自己项目成员大都没有这部分的技能,导致发布的时候总需要去编译压缩下.. 最终做了个命令行小工具.. 问题不在这里,前一阵子做压缩的时候发现压缩后竟然是undefined.最终才发现是es6的语法问题。
在开发项目过程中,经常需要将开发的项目部署到服务器上,但是每个环境都有每个环境的配置等等,如果每次打包的时候都要去调整(可能删除、替换等),那就很烦人了,这里分享下自己实现的几个简单的小工具(当然这个工具可能只对我自己有用),希望能够帮到你。
介绍几个日常开发中常用的几个小工具: anywhere / anywhere-auth / watchlessc / changeext