如何在Grunt任務中使用jQuery

我在Grunt任務中複製了一些HTML文件，並希望使用jQuery進行操作 - 就像這樣。。。如何在Grunt任務中使用jQuery

copy: { 
    expand: true, 
    src: 'source/*.html', 
    dest: 'build/', 
    ext: '.html', 
    filter: 'isFile', 
    options: { 
     process: function (content, srcpath) { 
     // find all occurrences of <span class='foo'> in file and wrap in a <div class='bah'> 
     $('span.foo').wrap('<div class="bah"></div>'); 
     } 
    }

我看到有一個咕嚕插件grunt-jsdom-jquery似乎解決這個問題，但它2年前的最後承諾，我不能得到它的工作 - 它似乎過於複雜的反正。

我想我需要使用node jsdom一些如何（當然文檔有一個將jQuery加載爲腳本的例子），但是我怎樣才能在Grunt中應用這個，特別是在一個主要任務中複製或concat？

任何想法讚賞。

來源

2016-03-30 Mr Incredible

['cheerio']（https://github.com/cheeriojs/cheerio）是否夠用，還是你真的需要一個完整的「瀏覽器」環境（jsdom）？ – mscdex

@mscdex感謝cheerio提示。我看到它有一個咕嚕咕嚕的包裝 - grunt-dom-massager :)會給它一個去。 –

@mscdex從假期回來，剛剛試過那個dom-massager - 它運作得非常好。如此快速和簡單。再次感謝cheerio提示。 –

嘗試grunt-processhtml

有一個method to change blocks of content在這裏你可以添加自定義塊類型的數組：

'use strict'; 

module.exports = function (processor) { 
    // This will allow to use this <!-- build:customBlock[:target] <value> --> syntax 
    processor.registerBlockType('customBlock', function (content, block, blockLine, blockContent) { 
    var title = '<h1>' + block.asset + '</h1>'; 
    var result = content.replace(blockLine, title); 

    return result; 
    }); 
};

這將改變在HTML以下：

<!-- build:customBlock myValue --> 
<p>This will be replaced with the result of the custom block above</p> 
<!-- /build -->

結果將是

<h1>myValue</h1>

來源

2016-03-30 15:59:46 graham

如何在Grunt任務中使用jQuery

回答

相關問題