如何在 Node.js 项目中自动执行编译 Twitter Bootstrap 等前端框架的任务?

2024-02-14

如何在 Node.js 项目中自动执行编译 Twitter Bootstrap 的任务?

我正在编辑 LESS 文件,这些文件编译成 Node.js 项目的 Bootstrap 自定义版本,因此我不能只使用在线定制器或预编译的 JavaScript/CSS 发行版。

如何使用 Grunt 或 Bower 之类的工具自动构建 Twitter Bootstrap 前端框架并将其从源代码编译到我的项目中?

是否有前端库和框架的包管理器?


我正在使用 Grunt 来编译我的 LESS。以下是您必须添加到 package.json 中的依赖项:

"devDependencies": {
    "grunt": "0.4.1",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-watch": "0.4.4",
    "assemble-less": "0.4.8"
}

这是我的 Gruntfile.js 的样子:

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            project: {
                options: {
                    paths: ['src/css/less'],
                    yuicompress: true
                },
                src: ['src/css/less/index.less'],               
                dest: 'src/css/styles.css'
            }
        },
        watch: {
            css: {
                files: ['src/css/less/**/*.less'],
                tasks: ['less']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('assemble-less');

    // grunt.registerTask('default', ['concat', 'less']);
    grunt.registerTask('default', ['less', 'watch']);

}

我只需输入grunt在开始工作之前。一旦发生变化,它就会运行一个观察程序并编译我的 less 文件。

编辑: 还有https://github.com/emberfeather/less.js-middleware https://github.com/emberfeather/less.js-middleware但您需要将编译添加到应用程序的流程中。这意味着您将在nodejs进程运行期间编译less文件。这种情况只会发生一次,如果您对某些文件进行更改,您将看不到结果。当然,您可能希望针对每个请求进行编译,但这会降低应用程序的性能。所以,你最终会得到某种观察者和编译器。这正是 Grunt 正在做的事情。如果你不想跑grunt每次你都可以将它添加到你的启动脚本(或Windows下的启动脚本)中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Node.js 项目中自动执行编译 Twitter Bootstrap 等前端框架的任务? 的相关文章

随机推荐

  • 如何使这个 CSS 汉堡菜单完全可点击?

    我正在开发一个纯 CSS 汉堡菜单图标 到目前为止 它工作得很好 只是线条之间的间隙不可点击 我如何修改此代码 以便整个按钮都可单击 而不仅仅是线条 a href title Open Menu class menu a menu widt
  • 在 ColorDialog 中设置自定义颜色

    颜色对话框中的自定义颜色设置应使用以下代码设置为 Blue Blue colorDialog1 CustomColors new int System Drawing Color Blue ToArgb 0xFF0000 colorDial
  • 为什么atomic.StoreUint32比sync.Once中的普通分配更受欢迎?

    在阅读Go源码时 我对src sync once go中的代码有一个疑问 func o Once Do f func Note Here is an incorrect implementation of Do if atomic Comp
  • backbone.js:自上次服务器保存以来是否有变化?

    我有一个骨干模型 使用 model set 我可以设置本地值 使用 model save 我可以将整个模型保存到服务器 我如何知道自上次服务器保存以来是否发生了更改 这意味着本地版本是脏的 模型 isNew 仅当模型从未保存到服务器时才有效
  • TestNG - 如果满足条件,如何从 BeforeSuite 注释中强制结束整个测试套件

    如果满足 BeforeSuite 注释中的条件 是否有办法退出整个测试套件 也许有一种方法可以调用 AfterSuite 并绕过整个测试 我在 BeforeSuite 中进行数据库调用 如果查询返回任何结果 我会发送一封电子邮件 现在想要终
  • 将 spring 区域设置变量传递给 application.properties

    我已将 URL 放入 application properties 文件中 现在这些 URL 需要具有语言 以便页面以不同的语言加载 例如 在我的 application properties 文件中 我有一个 联系我们 链接的属性 如下所
  • PostgreSQL 是否像 Oracle 一样缓存准备好的语句

    在使用 Oracle 几年后 我刚刚转向 PostgreSQL 我一直在研究 PostgreSQL 数据库应用程序 Java JDBC 中准备好的语句的一些性能问题 Oracle 在其 SGA 中缓存准备好的语句 准备好的语句池在数据库连接
  • 为什么C中函数的大小总是1字节?

    当我们使用以下命令检查函数的大小时sizeof 我们总是得到1 byte 这1个字节代表什么 这是一个约束违规 你的编译器should诊断它 如果它编译它 尽管如此 你的程序有未定义的行为 感谢 Steve Jessop对失败模式的澄清 并
  • 如何使用 StyledDocument 和 HTML 进行输出?

    我有一个JTextPane 我想使用其中输出文本StyledDocument 这是我的StyledDocument object StyledDocument dox StyledDocument textArea getDocument
  • ncurses 无法识别箭头键宏

    很长一段时间以来 我一直在努力寻找解决方案 我无法让终端窗口识别键盘 这是我的代码 while 1 if cmd ERR printw Controls LEFT RIGHT and SPACEBAR Q TO QUIT if cmd St
  • 跨平台 C# 媒体 API

    我正在尝试在 mono net 对象中定义一个 VideoFile 以便我可以调用 var file new VideoFile filepath file VideoDuration 是否有一个库 操作系统或商业 可以跨平台 mono n
  • Python 3.2 - GIL - 好/坏?

    Python 3 2 阿尔法is out http python org download releases 3 2 从更改日志来看 GIL 似乎已被完全重写 几个问题 拥有 GIL 是好是坏 和 为什么 新的GIL更好吗 如果是这样 怎么
  • VBA Excel - 无法在重叠选择上使用该命令

    我的代码似乎可以工作 但它突出显示了我的最后一行代码 并显示 运行时错误 1004 无法在重叠选择上使用该命令 我尝试了在网上找到的一些各种更改 但似乎无法修复该错误 Sub Delete EEE Dim Wrds As Variant G
  • ^a-zA-Z0-9 不包括空格?

    我试图找到段落中不是 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 且不是空格 gi 的所有内容 a zA Z0 9 gi 上面的方法不行 您还可以尝试 a z
  • 单元测试中什么是正向测试和负向测试

    我对 TDD 还很陌生 我看到一些文档提到了阳性测试 阴性测试 边界测试等 有人能告诉我阳性测试和阴性测试之间的区别吗 有没有关于不同类型测试的参考资料 我不是在找书 阳性检测 通过提供有效的测试系统 数据 阴性检测 通过提供无效的测试系统
  • 在容器内运行 Chromium:libGl 错误

    我正在尝试在 docker 容器内运行 Chromium 这是我得到的输出 Created new window in existing browser session libGL error failed to open drm devi
  • 如何处理 Windows Phone 7 上的后退按钮

    在 Windows Phone 7 模拟器上 当按下硬件后退按钮时 默认行为是关闭当前应用程序 我想覆盖此默认行为 以便它导航到我的应用程序中的上一页 经过一些研究 似乎应该可以通过重写 OnBackKeyPress 方法来做到这一点 如下
  • 要 Segue 还是 didSelectRowAtIndexPath?

    下面是我当前正在运行的代码 我有一个带有导航控制器 表格视图控制器和视图控制器的故事板设置 我正在尝试将名称从我为表设置的 NSDictionary 传递到详细视图控制器 我应该使用prepareforsegue还是didselectrow
  • Elasticsearch 对相同文档给出不同的分数

    我有一些具有相同内容的文档 但是当我尝试查询这些文档时 尽管查询的字段包含相同的文本 但我得到了不同的分数 我已经解释了分数 但我无法分析和找到不同分数的原因 我的查询是 curl localhost 9200 acqindex searc
  • 如何在 Node.js 项目中自动执行编译 Twitter Bootstrap 等前端框架的任务?

    如何在 Node js 项目中自动执行编译 Twitter Bootstrap 的任务 我正在编辑 LESS 文件 这些文件编译成 Node js 项目的 Bootstrap 自定义版本 因此我不能只使用在线定制器或预编译的 JavaScr