7

2つのことから始めましょう。私は現在、これらのタスクに grunt を使用しており、私が求めているものを備えた Yeoman についても知っています。私は Yeoman が本当に好きですが、私が取り組んでいるこの特定のプロジェクトには少しこだわりすぎます。

したがって、次のHTMLファイルがあります。

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- START-CSS-MIN:css/build/min.css -->
        <link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/boilerplate.css">
        <!-- END-CSS-MIN -->

        <!-- START-JS-MIN:js/build/modernizr.js -->
        <script src="js/libraries/modernizr.js"></script>
        <!-- END-JS-MIN -->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        <!-- START-JS-MIN:js/build/libraries.js -->
        <script src="js/libraries/underscore.js"></script>
        <script src="js/libraries/jquery/jquery.js"></script>
        <!-- END-JS-MIN -->
    </body>
</html>

これで、CSS-MIN および JS-MIN コメントが表示されます。現在、コメント内のすべてのファイルを（htmlparserを使用して）適切に収集し、コメントに直接基づいてそれらを縮小および連結するカスタムgruntビルドタスクがすでにあります。ビルド プロセスの最後の手順は、コメントを新しいファイルに置き換える HTML ファイルの新しいバージョン (実稼働用) を作成することです。たとえば、上記のコードは次のようになります。

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/build/min.css">

        <script src="js/build/modernizr.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        <script src="js/build/libraries.js"></script>
    </body>
</html>

私が持っている質問は、NodeJS でこれを行うにはどうすればよいかということです。htmlparser NPM モジュールは HTML の解析に最適ですが、HTML を変更する (特定の場所の特定の要素を削除および追加する) 必要があります。NodeJS コードでこれを行う方法に関する適切なパッケージ/チュートリアルはありますか?

4

2 に答える 2

3

これがコメント行に役立つかどうかはよくわかりませんが、DOM参照よりも解決すべき問題は少ないはずです。

使用を検討してください：https ：//github.com/tmpvar/jsdom

他にもオプションがあります。（https://github.com/joyent/node/wiki/modules）

于 2013-01-23T17:42:59.783 に答える
0

チェリオが使える

次のコードは、提供した出力を正確に生成します (いくつかの小さな空白の違いは別として)。

const $ = require('cheerio').load(inputHtml);

// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
    let commentIndex=-1;
    return (index, node)=>{
        const isComment = node.type === 'comment';
        if(isComment)commentIndex++;
        return isComment && commentIndexes.includes(commentIndex);
    }
}
    

$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();

//Cheerio respects whitespace provided here
$('head').append(`
        <link rel="stylesheet" href="css/build/min.css">

        <script src="js/build/modernizr.js"></script>
`)


$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(`      <script src="js/build/libraries.js"></script>
`)

console.log($.html())

出力：

<html><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        
        
        
        
        

        
        
        
    
        <link rel="stylesheet" href="css/build/min.css">

        <script src="js/build/modernizr.js"></script>
</head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        
        
        
        
    
      <script src="js/build/libraries.js"></script>
</body></html>
于 2021-03-18T11:32:36.703 に答える