gruntjs – 使用Bower和Grunt自定义语义ui

|
|-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并不困难.我不知道凉亭,但这就是我做的方式.

安装grunt-contrib-less.

在项目的某个位置创建一个新目录,例如’/少/语义’.将“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: {
    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都会自动重建.