我的项目使用 Bower 安装 deps 和 Grunt 来构建。我的项目树看起来像这样
|
|-bower_components
| |
| |-jquery
| |-semantic
| |-...
|-Bower.json
|-Gruntfile.js
|-public
| |
| |-css // Compiled, concatenated and minified semantic-ui
| |-js // and other libs should be here
|-...
|-etc..
最佳答案
使用 grunt 构建语义 UI 并不困难。我不知道 bower ,但这就是我做到的。
安装 grunt-contrib-less。
在项目中的某处创建一个新目录,例如'/少/语义'。从语义包a中复制“site”目录,即“bower_components/semantic/src/site”到新目录。您的所有覆盖都将在此处完成。
在“/less/semantic”中创建一个 config.json 文件来配置你想要包含在你的构建中的组件。文件内容将是这样的:
{
"elements": ["button", "divider"],
"collections": ["form"],
"modules": ["checkbox"]
}
将以下内容添加到您的 gruntFile.js 文件中:
var fs = require('fs');
// Defines files property for less task
var getSemanticFiles = function() {
var files = {};
var config = JSON.parse(fs.readFileSync('less/semantic/config.json'));
var srcDir = 'bower_components/semantic/definitions/';
var outputDir = 'less/semantic/output/';
for (var type in config) {
config[type].forEach(function(ele) {
files[outputDir + type + '.' + ele + '.output'] = [srcDir + type + '/' + ele + '.less'];
});
}
return files;
};
配置 less 任务如下:
less: {
semantic: {
options: { compile: true }
files: getSemanticFiels()
},
dist: {
options: { compile: true }
files: { 'public/css/semantic.css': ['less/semantic/output/*'] }
}
}
编辑“bower_components/semantic/src”中的theme.config,将@siteFoler 更改为“../../../less/site/”,并根据语义文档的需要进行任何其他更改。
你运行 grunt less:semantic 来编译所有需要的组件,然后运行 less:dist 把它们放到一个单独的 css 文件中。
当然,您可以配置监视任务来自动化该过程。然后每次更改时,css都会自动重新构建。
关于gruntjs - 使用 Bower 和 Grunt 自定义语义用户界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30014644/