Bootstrap gruntfile 中的用法

Question

我目前正在使用 node/npm 和 grunt 开发网络应用程序。我是网络开发的新手，来自 java 开发。这是我的原型结构的样子：

prototype
|--app
   |--index.html
   |--index.js
|--dist
   |--index.html
   |--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json

我计划使用以下结构进行开发：我的代码将通过使用 lib 文件夹中的 npm 模块进行模块化。这些将包含在 index.js 中。 app 文件夹中的 index.html 和 index.js 文件将使用 grunt-browserify 和 grunt-contrib-copy 为浏览器构建；结果将放入 dist 文件夹中。我还计划使用 bootstrap.

在bootstrap入门指南中，写着(source)，grunt dist会重新生成包含bootstrap的dist文件夹。

我的第一个问题是：这是怎么发生的？我想您必须将 bootstrap 文件夹放在某个地方。或者我需要安装一些 bootstrap 相关的包吗？简而言之：grunt "know about" bootstrap 是如何工作的？

我的第二个问题是：如何将这个过程包含在我的 gruntfile 中？现在我的 gruntfile 使用 browserify 来浏览 index.js 并复制以复制 index.html。这些在 goal 注册（这是正确的术语吗？）default：grunt.registerTask('default', ['browserify', 'copy', ]);。我想通过添加发生在 grunt dist.[=26= 中的 bootstrap magic 来改变这个 goal ]

非常感谢任何帮助！

Answer 1

您所指的目标在 bootstraps 构建环境中。您可以使用 npm install bootstrap@3 下载这个 grunt dist 他们引用的目标也包含在下载的 node_modules\bootstrap\Gruntfile.js 中，用于编译 bootstrap 本身以供分发。

 grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);

dist 目标使用了几个 grunt 模块，例如 grunt-contrib-htmlmin 和 grunt-contrib-cssmin，您的设置中可能不需要所有模块。我建议您查看此文件以及调用的每个目标和使用的模块，以获得有关如何进行的更多指导。

如果您只想在您的项目中使用 bootstrap，您可以下载已经编译和缩小的库 here 并将它们添加到您的项目中。

Bootstrap gruntfile 中的用法

Bootstrap usage in the gruntfile

javascript

node.js

twitter-bootstrap

gruntjs

gruntfile