使用Bower和Grunt自定义语义UI

Question

我的项目使用鲍尔安装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..

1. 是否可以使用grunt构建自定义语义UI（即自定义字体，颜色，删除未使用的组件）（或者也许使用Gulp从Grunt中调用的Gulp）？

2. 在哪里放置语义主题配置并覆盖文件？

Answer 1

使用咕unt构建语义UI并不困难。我不知道鲍尔，但这就是我的做法。

安装无grunt-contrib。

在您的项目中的某个地方创建一个新目录，例如'/lims/语义'。将"站点"目录从您的语义packagea（即bower_components/sminantic/src/site''复制到新目录。您所有的覆盖都将在这里完成。

在"/selly/senmantic"中创建一个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/*'] }
    }
}

编辑theme.config在'bower_components/sminantic/src'中，将@sitefoler更改为'../../../../../../../../../-../-../nester/site/'，并根据需要根据语义文档进行任何其他更改。

您少得多：语义来编译所有必需的组件，然后运行较少：将它们放入一个CSS文件中。

当然，您可以配置手表任务以自动化过程。然后，每次您进行更改时，CSS都会自动重建。

Answer 2

我确定有人会有一天会构建一个咕unt声，但是现在，我只是用它来调用所有Gulp命令使用Grunt。https://github.com/sindresorhus/grunt-shell。只需确保您调用GULP构建任务，而不是默认的GULP任务。它具有一项手表任务，会导致咕unt不完成外壳任务。