使用 Bower 和 Grunt 自定义语义用户界面答案

【问题标题】：Customize semantic-ui using Bower and Grunt使用 Bower 和 Grunt 自定义语义用户界面
【发布时间】：2015-05-03 13:56:45
【问题描述】：

我的项目使用 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（即自定义字体、颜色、删除未使用的组件）？
在哪里放置语义主题配置和覆盖文件？

【问题讨论】：

标签： gruntjs bower semantic-ui

【解决方案1】：

使用 grunt 构建语义 ui 并不难。我不知道凉亭，但我就是这样做的。

安装 grunt-contrib-less。

在项目的某处创建一个新目录，例如'/更少/语义'。将语义包中的“站点”目录，即“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都会自动重新构建。

【讨论】：

【解决方案2】：

我相信有一天有人会构建一个语义化的 grunt 构建，但现在，我只是使用它来调用所有使用 grunt 的 gulp 命令。 https://github.com/sindresorhus/grunt-shell。只要确保你调用的是 gulp 构建任务而不是默认的 gulp 任务。它有一个监视任务会导致 grunt 无法完成 shell 任务。

【讨论】：