如何在 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 等前端框架的任务? 的相关文章

  • Bootstrap Typeahead 仅显示第一个字母

    我很难让 Twitter Bootstrap 的 Typeahead 正常工作 Typeahead 仅匹配输入的第一个字母 我在预输入框中的结果看起来像 n n n N N n 我的代码是 有人可以帮忙吗 检查 html 中输出的数据源属性
  • 获取与请求

    我正在使用 JSON 流并尝试使用 fetch 来使用它 该流每隔几秒发出一些数据 仅当流关闭服务器端时 使用 fetch 来使用流才可以访问数据 例如 var target the url var options method POST
  • 使用 Bootstrap,但文本不响应

    我正在开展一个学校项目 http lauralynn87 github io WSP Project index html http lauralynn87 github io WSP Project index html 我正在使用 Bo
  • Mongoose:保存时根据父字段值设置子文档字段值

    这几乎肯定在其他地方有所涉及 但是 如果我有一个带有嵌入子文档的单一架构 如下所示 var ChildSchema new Schema name type String trim true user type String trim tr
  • 引导多重选择(刷新)无法正常工作

    我正在使用引导多选列表框 当用户在多选上选择选项时 它会正确显示 但有一个选项可以重置以前选择的选项 当用户点击重置按钮时 自动style display none添加到下拉按钮 下拉列表变得不可见 这是我的代码 button click
  • 在不调用“then”的情况下解决 Promise

    我有这段代码 它是我为一个名为 Poolio 的 NPM 模块编写的小型 API 的一部分 对于那些支持错误优先回调和承诺的人来说 我遇到的问题似乎是一个常见问题 我们如何在支持两者的同时保持一致的 API 和 API 的一致返回值 例如
  • 强大的上传不起作用:“文件”未定义,没有错误

    我正在尝试使用 formidable 上传文件 按照中的教程进行操作节点入门书 http www nodebeginner org 按照这段代码 我有一个服务器模块 它通过requestrequestHandler 模块的对象 主页加载带有
  • nodejs gmail api不支持承诺

    Google 推荐使用承诺 https developers google com api client library javascript features promises 但它的代码示例没有 当我修改代码时 我正在努力使 gmail
  • 调整 Twitter-Bootstrap 中按钮的大小

    我正在开发一个适合移动设备的网络应用程序 我希望它有一个非常简单的用户界面 包括大到连巨人安德烈都可以轻松点击的按钮 问题是 我没有看到通过将引导按钮的宽度或高度设置为百分比 像素数或简单地让它们填充其容器来显式调整引导按钮大小的简单方法
  • 如何正确关闭 Node.js Express 服务器?

    我需要在收到回调后关闭服务器 auth github callback网址 与平常一样HTTP API http nodejs org docs latest api http html关闭 服务器目前支持server close call
  • 无法在 postgres insert 中插入问号

    我正在尝试运行一个简单的 Postgres SQL 插入 insert into Resources values 1 How are you 但插入后的结果是 ID Data 1 How are you 1 我知道 要插入单引号等字符 我
  • exec 'node app' 挂在 gulp 任务中

    这个 gulp 任务挂起exec node config app 线 第一的exec工作正常 但第二个挂起 gulp task test function cb var exec require child process exec exe
  • 水线,在数组中查找数组

    我有视频模型 module exports attributes id string tags array 我想查找带有 Hello 或 World 等标签的所有视频 我可以轻松获取所有视频 例如 Video find tags 你好 我看
  • 为什么流行的 JavaScript 运行时不能处理看似同步的异步脚本?

    As 牛仔在这里的评论中说道 https gist github com domenic 3889970 我们都希望 以类似于以下的风格编写 非阻塞 JavaScript 异步代码 try var foo getSomething asyn
  • 使用 React js 和 Express API 服务器通过 fetch 发布对象

    我在 fetch 中的 post 方法遇到麻烦 因为我的服务器从客户端接收到一个空对象 我已经检查了客户端 但无法发送我想要发送的值 这是我的服务器 const express require express const app expre
  • socket.io 自动断开套接字

    当我在电子中运行 socket io 时 我不断在开发者控制台中收到此错误 engine io client socket probe transport websocket failed because of error transpor
  • 寻找在 gulp 中复制文件并根据父目录重命名的方法

    对于每个模块 我都有一些需要复制到构建目录的文件 并且正在寻找一种方法来最大限度地减少重复代码 gulp src client src modules signup index js pipe gulp dest build public
  • Cordova 文件传输到节点服务器

    我正在使用 ng Cordova fileTransfer 插件尝试将用户相机胶卷中的照片上传到 Node Express 服务器 我正在获取照片的本地 URI 并尝试将其传递给插件 如下所示 cordovaFileTransfer upl
  • 如何使用中间件拦截botbuilder sdk v4中的消息?

    我有一个在 botbuilder V3 上运行的机器人 其中我使用了一个中间件解释here https learn microsoft com en us azure bot service nodejs bot builder nodej
  • 为什么 Node.js 0.12.0 版本中的 V8 需要 SSE2 CPU 指令?

    尝试将 Node js 从 0 10 x 升级到 0 12 0 首先注意到的是 我收到一条错误消息 指出我的 CPU 不支持 SSE2 指令 实际上并不支持 尝试从源代码编译 Node js 但由于同样的原因失败了 在deps v8 src

随机推荐

  • 如何使这个 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