thinkphp框架项目使用gulp-htmlmin压缩出错

新手上路,请多包涵

问题描述

1.整体项目使用的是thinkphp的框架,前些日子想用gulp-htmlmin进行html代码压缩时遇到报错如下:

clipboard.png

F:\phpStudy\WWW\learnGulp>gulp htmlmin
[09:47:57] Using gulpfile F:\phpStudy\WWW\learnGulp\gulpfile.js
[09:47:57] Starting 'htmlmin'...
[09:47:57] 'htmlmin' errored after 107 ms
[09:47:57] Error in plugin "gulp-htmlmin"
Message:
    Parse Error: <div class="project_paidan tab-pane fade <if condition="$tab eq 'project_paidan'">in active</if>" id="project_paidan">
                <input disabled="disabled" class="form-control" type="hidden" name="id" value="{$list['id']}">
                <div class="sign-content">
                    <div class="row" style="padding: 12px 0;">
                        <div class="col-xs-offset-1 col-xs-10" style="text-align: right;">
                            <div class="edit">
                                <eq name="change_paidan_flag" value="1"><button type="button" class="btn btn-info" id="edit_paidan">编辑</button></eq>
                            </div>
                        </div>

是遇到thinkphp内置标签报错原因吗?还是其他的什么原因?请问该怎么处理呢?

2.在其他页面上进行压缩不会报错,但是查看结果,页面里的js是没有压缩成功的

压缩前代码:

clipboard.png

        <volist name="list" id="vo">
            <tr>
                <td>{$vo.Opid}</td>
                <td>{$vo.Storehouse_name}</td>
                <td>{$vo.Product_name}</td>
                <td>{$vo.Quantity}</td>
                <td>{$vo.sn}</td>
                <td>{$vo.assetid}</td>
                <td>{$vo.macaddress}</td>
                <td>{$vo.DoneDate}</td>
            </tr>
        </volist>
        </tbody>
    </table>
    <nav style="text-align: center;" id="page">
    </nav>
</div>

<script src="__PUBLIC__/layui_v2/layui.js"></script>
<script>
    layui.use(['layer','form','jquery','laypage'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,laypage = layui.laypage
            ,$ = layui.$;

        $("#search-submit").click(function(){
            $("#search-form").submit();
        });

压缩后代码:

clipboard.png

<volist name="list" id="vo"><tr><td>{$vo.Opid}</td><td>{$vo.Storehouse_name}</td><td>{$vo.Product_name}</td><td>{$vo.Quantity}</td><td>{$vo.sn}</td><td>{$vo.assetid}</td><td>{$vo.macaddress}</td><td>{$vo.DoneDate}</td></tr></volist></tbody></table><nav style="text-align:center" id="page"></nav></div><script src="__PUBLIC__/layui_v2/layui.js"></script><script>layui.use(['layer','form','jquery','laypage'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,laypage = layui.laypage
            ,$ = layui.$;

        $("#search-submit").click(function(){
            $("#search-form").submit();
        });
注意:并不是所有的js都无法压缩,比如下面这个就压缩成功了

压缩前代码:

                    <tr>
                        <td>返点支付周期:</td>
                        <td>
                            <select name="rebatecycle">
                                <option value="">请选择</option>
                                <option value="年度支付">年度支付</option>
                                <option value="半年支付">半年支付</option>
                                <option value="季度支付">季度支付</option>
                                <option value="月度支付">月度支付</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<div id="market-list"></div>
<script type="text/javascript">
    $(".add-submit").live('click',function(){
        var need = {cnum:1,brand:2,type:3,project:4,property:5,signingtime:6,yeartime:7,overtime:8};
        var empty = true;
        var message = '【';
        $("input").each(function(){
            if(need[$(this).attr("name")]){
                var value = $(this).val();
                if(!value){
                    empty = false;
                    var name = $(this).parent().prev().html();
                    name = name.substring(0,name.length - 1);
                    message = message + name + '--';
                }
            }
        });

压缩后代码:

<tr><td>返点支付周期:</td><td><select name="rebatecycle"><option value="">请选择</option><option value="年度支付">年度支付</option><option value="半年支付">半年支付</option><option value="季度支付">季度支付</option><option value="月度支付">月度支付</option></select></td></tr></table></form></div></div></div><div id="market-list"></div><script type="text/javascript">function getmarketlist(t){var e='<ul style="width:'+$("#marketname").width()+'px;height: 104px;font-size:12px;overflow: auto;background: #d0f2c5">'; <?php foreach($marketlist as $k => $v) { ?> ;return(""==t||0<="<?php echo $v; ?>".indexOf(t))&&(e+='<li class="market" style="border-bottom:1px solid #f2bebe;list-style: none;margin: 0;padding: 0 14px;height: 25px;line-height: 25px;" value="<?php echo $v; ?>"><?php echo $v; ?></li>'), <?php } ?> 

这是为什么?没有看出这两个文件有哪里不一样的。难道是js开头使用了layui.use的原因?不明白

gulp文件里htmlmin配置如下:

gulp.task('htmlmin', function() {
    var options = {
        removeComments: true,  //清除HTML注释
        collapseWhitespace: true,  //压缩HTML
        minifyJS: true,  //压缩页面JS
        minifyCSS: true  //压缩页面CSS
    };
    return gulp.src('./src/test.html')
    //压缩html
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./Application/Home'));
});

到底什么原因啊,大家帮帮忙TT
(之前的提问超时被关闭了,但这个问题仍然没有解决)

阅读 2.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏