gruntjs - 使用 Bower 和 Grunt 自定义语义用户界面

Question

我的项目使用 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(或者可能使用从 Grunt 调用的 Gulp)构建自定义语义 ui(即自定义字体、颜色、删除未使用的组件)？

在哪里放置语义主题配置和覆盖文件？

Answer 1

使用 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都会自动重新构建。