咕嚕內聯CSS和Javascript

有沒有一種方法，使用咕嚕，包括精縮CSS和JavaScript內聯？

要使用usemin的格式作爲一個例子，我希望看到這樣的事情：

<!-- build:css inline --> 
<link rel="stylesheet" href="styles/foo.css"> 
<link rel="stylesheet" href="styles/bar.css"> 
... 
<!-- endbuild --> 

<!-- build:js inline --> 
<script src="js/foo.js"></script> 
<script src="js/bar.js"></script> 
... 
<!-- endbuild -->

化作這是這樣的：

<style>body { color: red; } /*css is here*/</style> 
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>

長的版本：

所以，我正在研究一個Tumblr主題。爲了在主題中使用CSS或JS文件，他們必須上傳到Tumblr。唯一的上傳方式是經常崩潰的糟糕的小網頁表單。我試圖避免這種接口，直到我準備好要上傳的最終代碼，因爲

沒有辦法刪除上傳的文件，並
，而我在開發過程中來的，這些額外的步驟花太多時間

爲了得到這個，我一直在複製我的CSS和JS爲<style>和<script>標籤在我的文件，那麼整個事情複製到的Tumblr主題編輯器。速度更快，所以我對此感到滿意，但手動將CSS和JS粘貼到文件中似乎違背了Grunt的精神和它提供的自動化。

理想情況下，我將能夠運行grunt build，並讓它通過CSS和JS內聯吐出html文件，然後我可以將其複製到Tumblr界面（理想情況下，我可以複製該文件HTML文件到Tumblr，但Tumblr不提供FTP或SSH或任何有用的界面，所以我會解決這個問題）。

看起來好像grunt-usemin可以提供我正在尋找的功能，但是我還沒有能夠按照我所描述的那樣工作。也許它只是把所有東西都放到一個單獨的文件中。

我打算使用任何Grunt工具，如果有人知道可以做到這一點。

來源

2013-10-29 Jonathan Wren

我不知道任何grunt插件，可以縮小內聯JS和CSS。你可以做的最好的是通過在線縮小工具手動研磨它們，然後複製粘貼到你的Tumblr主題中。 –

我以前用過這個：https://github.com/motherjones/grunt-html-smoosher。這非常簡單，只需提供一個輸入文件和輸出文件;沒有額外的配置，它只是自動找到文件並將它們內聯。

grunt.initConfig({ 
    smoosher: { 
    dist: { 
     files: { 
     'dest-index.html': 'source-index.html', 
     }, 
    }, 
    }, 
});

希望這會有所幫助。

來源

2013-10-29 19:03:56 Ben

這正是我一直在尋找的。謝謝！ –

截至2014年2月，npm安裝grunt-html-smoosher停止工作，因爲它取決於已從npm註冊表中刪除的軟件包。（請參閱項目回購的多個問題。）有一個拉動請求來解決這個問題，但grunt-html-smoosher在一年左右沒有看到任何進展。與此同時，我已經發布了[grunt-html-smoosher-install-fix]（https://www.npmjs.com/package/grunt-html-smoosher-install-fix）。這是一個希望臨時的解決方法，直到修復程序合併或有人分叉項目或其他東西。 – Trott

@特羅特我也在下面提出了一些替代方案 – JrBenito

只是提供給其他的引用可能是有用的：

這grant-inline任務做內聯CSS和JavaScript的，但你可以使用_inline參數做選擇。還有一個類似的任務grunt-inline-assests做同樣的事情。兩者都很好生成HTML電子郵件。

最後，this one的目的有些不同;它會根據HTML中的標記插入所有css和js作爲外部參數。在開發主題和前端時，這可能非常有用，您希望將js或css包含在許多小文件中以便於維護。Sails-linker任務可用於注入所有的CSS和JS，而在發展和單排滑輪鞋上面中的一個可以用於生成與CSS最終生產HTML文件，JS 精縮和內聯。

來源

2016-06-30 20:46:53 JrBenito

咕嚕內聯CSS和Javascript

回答

相關問題