如何合並和清理具有重疊選擇器/屬性的 2 css 文件？

Question

我在這里，試圖在維護網站和向其添加新元素方面做得不錯。 但在此之前，我想清理它的 css 個文件。

該站點使用 2 個樣式表，一個 v1 和一個 v2。 基本上，v2 添加了新規則，但也覆蓋了 v1 中的規則/屬性。 所以我不能只刪除 v1，因為 v2 不包含所有規則和屬性。

這是一個簡單的例子

從 v1

.globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 15px;
}

從 v2

.globalFooter {
    font-size: 18px;
    display: inline;
}

所以，結果應該是這樣的

.globalFooter {
    background-color: #eee;
    color: #fff;
    font-size: 18px;
    display: inline;
}

我考慮過手動將 v2 合並到 v1 中，移動新元素並覆蓋屬性，但是 v2 有 3000 行長......

因此，我試圖找到一個可以自動執行此操作的工具，但我沒有找到任何可靠的東西。 我需要一些可以合並這兩個文件的東西，並考慮到第二個文件是在之后加載的，所以它可以覆蓋第一個文件的規則和屬性。

有人知道這樣做的好工具/腳本嗎？

謝謝

Answer 1

經過僅幾分鍾的搜索，我發現了這一點： CSS Compressor

基本上，您可以上傳幾個CSS文件，選擇其他選項（例如合並屬性），然后將文件合並為一張紙。 我還沒有使用過它，但是我聽說它工作得很好，只有一些差異。

檢查一下，讓我們知道是否可行

還有This and This其他有用工具的列表

Answer 2

通過這種組合，我解決了CSS並將其優化到最大程度。

配置Grunt之后，請安裝以下插件：

• 咕post聲
• grunt-contrib-cssmin
• 咕unt聲
• 清潔css
• postcss-flexbugs-修復
• 自動前綴

Gruntfile.js

創建任務以縮小，合並選擇器和屬性，刪除重復項等。

cssmin: {
    options: {
        advanced: true, 
        mergeAdjacent: true,
        removeDuplicates: true,
        shorthandCompacting: false 
    },
    files: {    
        src: 'your/path/style.css',
        dest: 'your/path/style.min.css' 
    }  
},

創建用於解析CSS的任務后，添加前綴並進行更多優化。

postcss: {
    options: {
        processors: [
            require('postcss-flexbugs-fixes'),
            require('autoprefixer')({
                browsers: [  
                    'last 2 versions',  
                    'Edge >= 12',
                    'Explorer >= 9']
            }),
            require('cssnano')
        ],
        map: false,
    }, 
    files: {    
        src: 'your/path/style.min.css',
        dest: 'your/path/style.min.css' 
    }
}

注冊任務的快捷方式

grunt.registerTask('css', ['cssmin', 'postcss']);

還有Voilà！

grunt css 

Answer 3

我一直在尋找與您完全相同的東西，並且無法相信沒有任何東西可以輕易找到，即使用例在我看來很常見。

盡管如此，我還是找到了完美的工具，它完全可以滿足您的要求 - CSSO 。 它將相同的類合並在一起並省略重復的 CSS 規則。

Answer 4

在Tibian / Linux上感謝Tiago Fontella

使用合並css

 cat a.css b.css d.css > merged.css 

apt-get update
apt-get upgrade
apt-get install curl   
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install build-essential nodejs
mkdir node-project
cd node-project
npm init
npm install -g grunt (or npm install grunt?) 
npm install grunt-postcss --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install --save-dev grunt-cssnano
npm install --save-dev clean-css
npm i postcss-flexbugs-fixes
npm i autoprefixer

腳本必須在節點項目中：Gruntfile.js使用nano Gruntfile.js創建它

   module.exports = function(grunt) {
       grunt.initConfig({
           cssmin: {
              options: {
                  advanced: true,
                  mergeAdjacent: true,
                  removeDuplicates: true,
                  shorthandCompacting: false
              },
              files: {
                  src: 'your/path/style.css',
                  dest: 'your/path/style.min.css'
              }
           },
           postcss: {
              options: {
                  processors: [
                      require('postcss-flexbugs-fixes'),
                      require('autoprefixer')({
                          browsers: [
                              'last 2 versions',
                              'Edge >= 12',
                              'Explorer >= 9']
                      }),
                      require('cssnano')
                  ],
                  map: false,
              },
              files: {
                  src: 'your/path/style.min.css',
                  dest: 'your/path/style.min.css'
              }
           }
       });
       grunt.loadNpmTasks('grunt-contrib-cssmin');
       grunt.loadNpmTasks('grunt-postcss');
       grunt.registerTask('css', ['cssmin', 'postcss']);
   };

Answer 5

您可以在構建期間使用concat合並兩個文件

首先，您需要從npm.com/package/concat下載它

然后合並並需要新文件

在用於自動化的node或package.json中，合並看起來像這樣；

concat ./v1.js ./v2.js -o /vOutput.js