合並並縮小多個CSS / JS文件

Question

我正在嘗試通過合並和壓縮CSS和JS文件來優化網站性能。 考慮到我所面臨的實際情況，我的問題更多地是關於如何實現這一（具體）步驟的（盡管在其他開發人員中也應該是典型的）。

我的頁面引用了多個CSS和JS文件，如下所示：

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

對於生產版本，我想將3個CSS文件合並為一個，並使用例如YUI Compressor將其最小化。 但是，然后，我需要更新所有需要這3個文件的頁面，以引用新近縮小的CSS。 這似乎容易出錯（例如，您要在許多文件中刪除並添加一些行）。 還有其他風險較小的方法嗎？ JS文件也有同樣的問題。

Answer 1

檢出minify-它允許您將多個js，css文件組合到一個URL中，例如，將它們組合為一個

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

我們已經使用了多年，它的工作非常出色，並且可以即時運行（無需編輯文件）。

Answer 2

我認為YUI Compressor是最好的。 它最小化了JS和CSS，甚至剝離了人們用於底層JavaScript調試的console.log語句。

看看這有多容易 。

您可以在ant任務中啟動它，因此，如果使用svn / git，則將其包含在post / commit鈎子中。

更新：如今，我對concat使用grunt，將貢獻最小化，也將其丑化。 您可以將其與觀察程序一起使用，以便在您更改源時在后台創建新的縮小文件。 uglify貢獻不僅剝離控制台日志，而且剝離未使用的功能和屬性。

請參閱本教程以獲取簡要的見解。

更新：如今，人們不再關注它的前身“ gulp”，而是將npm用作構建工具。 在這里閱讀。

更新：所以現在人們使用yarn運行npm。 難怪; 紗線圖標是一只貓。 當前大多數框架都使用webpack將資源捆綁到軟件包中，然后還要注意縮小問題 。

Answer 3

我需要更新所有需要這3個文件的頁面，以引用新近縮小的CSS。

首先，我想說你應該有共同的頭。 因此，不需要在任何時候都更改所有標頭。 最好使用單個標頭或2-3個標頭。 因此，根據您的頁面需要，您可以更改標題。 因此，每當您要擴展您的Web應用程序時，風險和繁瑣程度都會降低。

您沒有提到您的開發環境。 您可以看到針對不同環境列出了許多壓縮工具 。 而且您正在使用好的工具，即YUUI Compressor。

Answer 4

我最終使用CodeKit連接了我的CSS和JS文件。 我發現真正有用的功能是可以在保存文件時進行串聯； 因為它監視相應的CSS / JS資產。 一旦將它們正確組合到例如1個CSS和1個JS文件中，所有其他文件都可以簡單地引用這2個文件。

您甚至可以要求CodeKit快速進行縮小/壓縮。

免責聲明：我與CodeKit沒有任何關系。 我在網上隨機找到它，並且在我的開發過程中它是一個很好的工具。 自從一年多以前我第一次使用它以來，它還帶有良好的更新。

Answer 5

Windows用戶快速提示，如果您只想連接文件：

在所需位置打開一個cmd，然后使用“ type ”將文件通過管道傳輸到文件

例如：

type .\scripts\*.js >> .\combined.js

如果腳本的順序很重要，則必須按所需順序顯式鍵入文件 。

我用這一個bat文件為我的角/引導項目

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

Answer 6

據2015年一年的街道和國際海事組織正在使用一飲而盡最簡單的方法- http://gulpjs.com/ 。 使用js腳本的gulp - uglify和css的 gulp - minify -css來簡化代碼非常簡單。 Gulp絕對值得一試

Answer 7

對於想要一些更輕便，更靈活的東西的人，我今天創建了js.sh來解決這個問題。 這是一個針對JS文件的簡單命令行工具，可以很容易地對其進行修改以處理CSS文件。 好處：

• 易於配置，以供項目中的多個開發人員使用
• 按照script_order.txt中指定的順序合並JS文件
• 使用Google的Closure編譯器壓縮它們
• 由於iPhone不會緩存大於25kb的內容，因此將JS盡可能分成<25kb的塊
• 生成帶有<script>標記的小型PHP文件，您可以在適當的位置添加該文件
• 用法： js.sh -u yourname

它可能會進行一些改進，但是對於我的用例來說，它比到目前為止我看到的所有其他解決方案都更好。

Answer 8

我看不到您提到內容管理系統（Wordpress，Joomla，Drupal等），但是如果您使用任何流行的CMS，它們都具有可用的插件/模塊（還有免費選項），這些插件/模塊將最小化並緩存您的CSS和js。

使用插件可以使未壓縮版本可供編輯，然后在進行更改時，插件會自動包含您的更改並重新壓縮文件。 只要確保您選擇了一個插件，該插件可以在文件損壞的情況下排除文件（例如自定義js文件）。

過去，我曾嘗試過手動保留這些文件，但這總是成為維護的噩夢。 祝您好運，希望對您有所幫助。

Answer 9

優化的第一步是文件最小化。 （我強烈建議GULP進行最小化和優化。其簡單的監視解決方案，安裝和所有文件都可以立即壓縮。支持所有CSS，JS，less，sass等。）

或老派解決方案：

1）通常，作為優化過程，要優化站點性能，請嘗試將所有CSS合並到一個文件中，然后使用Compass壓縮文件。 這樣，您對靜態CSS的多個請求將被替換為一個。

2）您可以使用CDN（或Google托管庫）解決多個JS問題，因此請求將轉到您的其他服務器。 這樣，服務器就不會在發送下一個請求之前等待上一個請求完成。

3）如果您有自己本地存儲的JavaScript，請使用Brackets插件“ Compress JavaScript”最小化每個文件。 基本上，只需單擊一下即可壓縮JavsScript。 Brackets是CSS和JS的免費編輯器，但可用於PHP和其他語言。 有很多可供前端和后端開發人員使用的插件。 通常，“一鍵式”執行所有這些（到目前為止是多個）命令。 順便說一句，方括號取代了我非常昂貴的Dreamweaver;）

3）嘗試使用工具，如薩斯 ，指南針， 少給你減少CSS。

注意：即使不使用SASS混合或變量，您的CSS也會被壓縮（只需使用純CSS和Compass的 “ watch”命令即可為您壓縮）。

我希望這有幫助！

Answer 10

如果您要對所提供的文件進行任何預處理，則可能要設置適當的構建系統（例如Makefile）。 這樣，您將擁有一些沒有重復的源文件，並且每當進行更改時，您都將運行“ make”，它會使所有自動生成的文件保持最新狀態。 如果已經建立了構建系統，請學習其工作原理並使用它。 如果沒有，則需要添加一個。

因此，首先，從命令行中找出如何合並和縮小文件（YUICompressor文檔對此進行了介紹）。 為自動生成的內容指定一個目錄，該目錄與您正在處理但可以訪問的Web服務器分開，並輸出到該目錄，例如gen / scripts / combined.js。 將您使用的命令放入Makefile中，然后在每次更改並希望更改生效時重新運行“ make”。 然后更新其他文件中的標題，以指向合並和縮小的文件。

Answer 11

在我的symfony項目中，我做這樣的事情

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

當開發版本准備好投入生產時，我將使用此腳本合並所有css文件並替換min.css的內容。

但是，僅當所有頁面中都包含相同的CSS文件時，此解決方案才有效。

Answer 12

您可以使用由著名的YUI壓縮器構建的cssmin節點模塊

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

Answer 13

在這里可以找到所有更快的實用程序

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json