Bower ve Grunt kullanarak semantic-ui'yi özelleştirme

Question

Projem, oluşturmak için deps ve Grunt yüklemek için Bower'ı kullanır. Projem ağacı bu

| 
|-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. benziyor o Grunt kullanarak (ya da belki Grunt çağrılan yudum kullanarak) (yani kullanılmayan bileşenleri kaldırmak, yazı tipi, renk özelleştirmek) özel semantik-ui inşa etmek mümkün mü?

2. Semantik tema yapılandırması nerede yerleştirilir ve dosyaları geçersiz kılar?

Answer 1

Birisi bir gün anlamsal bir homurtu yapı inşa edecek, ama şimdi, ben sadece homurtuyu kullanarak tüm yudum komutları çağırmak için kullanacağız eminim. https://github.com/sindresorhus/grunt-shell. Sadece gulp yapım görevini çağırdığınızdan emin olun ve varsayılan gulp görevini değil. Kabuk görevini bitirmemesi için homurdağa neden olacak bir saat görevine sahip.

Answer 2

Anlamsal-ui oluşturmak için grunt kullanmak zor değil. Bower hakkında bilmiyorum, ama ben böyle yaptım.

Grunt-contrib-less'i yükleyin.

Projenizde yeni bir dizin oluşturun, örn. '/ Daha az/anlamsal'. 'Site' dizinini semantik paketinizden, yani 'bower_components/semantic/src/site' dizininden yeni dizine kopyalayın. Tüm geçersiz kılmalar burada yapılacak.

Yapıya dahil edilmesini istediğiniz bileşenleri yapılandırmak için '/ less/semantic' içinde bir config.json dosyası oluşturun. içinde

less: { 
    semantic: { 
     options: { compile: true } 
     files: getSemanticFiels() 
    }, 
    dist: { 
     options: { compile: true } 
     files: { 'public/css/semantic.css': ['less/semantic/output/*'] } 
    } 
} 

Düzenleme theme.config: Aşağıdaki şekilde

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; 
}; 

yapılandır az görev: sizin gruntFile.js dosyasına aşağıdaki

{ 
    "elements": ["button", "divider"], 
    "collections": ["form"], 
    "modules": ["checkbox"] 
} 

Ekleme: dosya içeriği böyle bir şey olacak 'bower_components/semantic/src', @siteFoler'ı '../../../less/site/' olarak değiştirin ve her semantik belge için gereken ek değişiklikleri yapın.

Tüm gerekli bileşenleri derlemek için semantik ve daha az çalıştırın: dist, tek bir css dosyasına koymak için daha az zor çalıştırırsınız.

Elbette işlemi otomatikleştirmek için bir saat görevi yapılandırabilirsiniz. Sonra her değişiklik yaptığınızda, css otomatik olarak yeniden oluşturulacaktır.