Gruntjs 使用Bower和Grunt定制语义ui

我的项目使用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（即自定义字体、颜色、删除未使用的组件）

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

---

我相信有一天会有人构建一个grunt构建来实现语义，但现在，我只是用它来调用所有使用grunt的gulp命令。只需确保调用的是gulpbuild任务，而不是默认的gulp任务。它有一个监视任务，这将导致grunt无法完成shell任务

使用grunt构建语义ui并不困难。我不知道鲍尔的事，但我就是这样做的

安装grunt contrib less

在项目中的某个位置创建一个新目录，例如“/less/semantic”。将“站点”目录从语义包A（即“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: {
    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都会自动重新构建