MIP 工具完善

@@ -4,7 +4,9 @@ const mipUtils = require('../mip-utils');
 const co = require('bluebird').coroutine;
 
 const testStr = `
+<style>body{}</style>
 <div id="content" class="J-article-content article-content" data-pswp-uid="1">
+<img src="https://img12.static.yhbimg.com/goodsimg/2017/05/16/15/024e830d0afb81b1ff8eb2c67651fe2c28.gif?imageView2/2/w/640/h/640/q/60">
 <p class="section txt">作为处理最近热题话点的<a style="color:#4B7BB7;" href="http://toutiao.eastday.com/search.html?kw=s8">s8</a>发布会备受关注外，小伙伴们迷之关注的s8的<a style="color:#4B7BB7;" href="http://toutiao.eastday.com/search.html?kw=售价">售价</a>。前几日网传高达一万售价的今日恐怕就被啪啪打脸，目前S8已在<a style="color:#4B7BB7;" href="http://toutiao.eastday.com/search.html?kw=京东">京东</a>公布预售价：5688元。</p>
 <figure class="section img">
 <a class="img-wrap" style="padding-bottom: 39.07%;" href="https://04.imgmini.eastday.com/mobile/20170522/20170522113057_201c03cf59ce3e37181a6d156cac558d_1.jpeg" data-size="604x236"><img width="100%" alt="" src="https://04.imgmini.eastday.com/mobile/20170522/20170522113057_201c03cf59ce3e37181a6d156cac558d_1.jpeg" data-weight="604" data-width="604" data-height="236"></a>

@@ -7,12 +7,12 @@ module.exports = {
      * @param {*} prefix
      */
     processStyle($, prefix) {
-        let css = [];
+        let css = ['/* inlineStyle start */'];
 
         $('*').each(function(index) {
             let $this = $(this);
             let localStyle = $this.attr('style');
-            let className = `data-yoho-style-${prefix}-${index}`;
+            let className = `yoho-inline-style-${prefix}-${index}`;
 
             if (localStyle) {
                 css.push(`.${className}{${localStyle}}`);
@@ -28,19 +28,68 @@ module.exports = {
      * @param {*} $
      */
     processTag($) {
+        let css = ['/* styleTag start */'];
+
+        // mip-anim
+        $('img[src*=".gif"]').each(function() {
+            let $this = $(this);
+            let mipAnim = `<mip-anim layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-anim>`; // eslint-disable-line
+
+            $this.replaceWith(mipAnim);
+        });
+
+        // mip-img
         $('img').each(function() {
             let $this = $(this);
-            let mipImg = `<mip-img layout="responsive" popup width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
+            let mipImg = `<mip-img layout="responsive" width="350" height="263" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-img>`; // eslint-disable-line
 
             $this.replaceWith(mipImg);
         });
+
+        // mip-video
+        $('video').each(function() {
+            let $this = $(this);
+            let mipVideo = `<mip-video layout="responsive" width="350" height="263" poster="${$this.attr('poster') || ''}" src="${$this.attr('src')}" alt="${$this.attr('alt') || ''}" class="${$this.attr('class') || ''}"></mip-video>`; // eslint-disable-line
+
+            $this.replaceWith(mipVideo);
+        });
+
+        // mip-audio
+        $('audio').each(function() {
+            let $this = $(this);
+            let mipAudio = `<mip-audio src="${$this.attr('src')}"></mip-audio>`; // eslint-disable-line
+
+            $this.replaceWith(mipAudio);
+        });
+
+        // mip-iframe
+        $('iframe').each(function() {
+            let $this = $(this);
+            let mipIframe = `<mip-iframe layout="responsive" width="350" height="263" src="${$this.attr('src')}"></mip-iframe>`; // eslint-disable-line
+
+            $this.replaceWith(mipIframe);
+        });
+
+        // mip-link
         $('a').each(function() {
             let $this = $(this);
-            let mipLink = `<mip-link layout="responsive">${$this.html()}</mip-link>`; // eslint-disable-line
+            let mipLink = `<mip-link href="${$this.attr('href')}" title="${$this.attr('title') || ''}">${$this.html()}</mip-link>`; // eslint-disable-line
 
             $this.replaceWith(mipLink);
         });
-        return $.html();
+
+        // style
+        $('style').each(function() {
+            let $this = $(this);
+
+            css.push($this.html());
+            $this.remove();
+        });
+
+        return {
+            mipHtml: $.html(),
+            css: css.join('')
+        };
     },
 
     /**
@@ -48,20 +97,18 @@ module.exports = {
      * @param {*} html HTML
      * @param {*} prefix  CSS 前缀
      */
-    process(html, prefix) {
-        html = html || '';
-        prefix = prefix || 0;
-
-        let mipData = {};
-
+    process(html = '', prefix = 0) {
         let $ = cheerio.load(html, {
             decodeEntities: false
         });
 
-        mipData.css = this.processStyle($, prefix);
-        mipData.mipHtml = this.processTag($);
+        let inlineStyle = this.processStyle($, prefix); // 必须先处理内联样式
+        let tagHtml = this.processTag($);
 
-        return mipData;
+        return {
+            mipHtml: tagHtml.mipHtml,
+            css: tagHtml.css + inlineStyle
+        };
     }
 };