Machen Sie es selbst und nehmen Sie ausreichend Nahrung und Kleidung mit.

Grunt ist heutzutage sehr beliebt, obwohl es Spaß macht, es zu benutzen, ist seine Konfiguration wirklich nervig. Wenn Sie es noch nicht verwendet haben und es schnell beherrschen möchten, fällt ein gewisser Lernaufwand an, und Sie müssen auch den Big-Guy-Knoten installieren. Zu Beginn des Projekts haben wir das leichte Tool Compiler.jar zum Verpacken ausgewählt . Ich habe darüber nachgedacht, wie ich ein Ein-Klick-Verpackungstool schreiben könnte. Zuvor haben wir einige JS-Dateien manuell in eine Batch-Datei gespleißt, die den Anforderungen der Paketdatei „compiler.jar“ entspricht, und diesen Batch dann ausgeführt, um die von uns benötigten JS- und CSS-Dateien zu generieren. Mit zunehmender Anzahl der JS-Dateien wird das manuelle Zusammenfügen der Adressen dieser Dateien sehr anspruchsvoll, und es ist auch leicht, bestimmte Dateien zu übersehen oder zu duplizieren, sodass das Schreiben des „One-Click-Packaging-Tools“ dringend erforderlich wird. Das Folgende ist Teil einer echten index.html-Datei:

<spanmicrosoft yahei><span><!</span><span>DOCTYPE html</span><span>></span>
<span><</span><span>html</span><span>></span>
<span><</span><span>head</span><span>></span>
    <span><</span><span>meta </span><span>charset</span><span>="utf-8"</span><span>></span>
    <span><</span><span>meta </span><span>http-equiv</span><span>="X-UA-Compatible"</span><span> content</span><span>="IE=edge,chrome=1"</span><span>></span>
    <span><</span><span>meta </span><span>name</span><span>="viewport"</span><span> content</span><span>="target-densitydpi=device-dpi, initial-scale=1, user-scalable=0, maximum-scale=1"</span><span>></span>
     <span><!--</span><span>隐藏浏览器的工具栏和菜单栏,对iso系统起用</span><span>--></span>
    <span><!--用于PC上调式，不参与合并压缩</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/database.js"</span><span> name</span><span>="noBuild"</span><span>></</span><span>script</span><span>></span>
    <span><!--</span><span>Iframe加载处理</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/LoadMode.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/jQuery.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/underscore.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/snap.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/pixi.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/Xut.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/isMobile.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/aaronRequire.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/nextTick.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Config.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Object.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Function.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Array.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/video.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 自定义事件，合集处理，iframe通讯 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/event/asEvented.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/core/message/pms.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>插件</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/cordova.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/readAssetsFilePlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/initDatabase.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/web.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/video.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/openAppPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/tabletPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/statusbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/iap.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/AppStoreLink.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/downloadPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/xxteManager.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/unzipPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/readPlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/plugin/deletePlugin.js"</span><span>></</span><span>script</span><span>></span>
    <span><!--</span><span> 动画库 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/TweenMax.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/plugins/ThrowPropsPlugin.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/PptAnimation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/CanvasAnimation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/Draggable.min.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/dragdrop.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/iscroll.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/hammer.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons-config.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/animate/SpriteA.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/util/Utils.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/LocalStorage.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/ScriptLoad.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/ExecuteSql.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/PromptNotice.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/util/edge.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 配置文件，数据文件，结构文件 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/Store.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/data/StoreManager.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 数据初始化 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Main.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Initialize.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneLayout.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneFactory.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneController.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/LoadScene.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/Dispatcher.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 工具栏 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/Navbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/sToolbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/fToolbar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/searchBar.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/toolbar/bookMark.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 多线程任务片 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/Buffer.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContents.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskComponents.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskBackground.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContainer.js"</span><span>></</span><span>script</span><span>></span>

    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Parser.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Collection.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/MultiEvent.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/PageBase.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Page.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Master.js"</span><span>></</span><span>script</span><span>></span>


    <span><!--</span><span> 页面管理模块 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/transform/Translation.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/OverrideApi.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Abstract.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Emitter.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/PageMgr.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/MasterMgr.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/Compiler.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/ViewModel.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/SwitchPage.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/controller/EventDrive.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>热点管理</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignAutoRun.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignTrigger.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignSuspend.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignOriginal.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignRecovery.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/ProcessControl.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/scheduler/Binding.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span> 适配器,用于处理热点 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Content.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Widget.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Media.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Action.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-ShowNote.js"</span><span>></</span><span>script</span><span>></span>

     <span><!--</span><span>多媒体对象 </span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/Audio.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/Video.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/AudioManager.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/media/VideoManager.js"</span><span>></</span><span>script</span><span>></span>

    <span><!--</span><span>文本热点</span><span>--></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/content/conFilter.js"</span><span>></</span><span>script</span><span>></span>
    <span><</span><span>script </span><span>src</span><span>="lib/component/content/conAlgorithm.js"</span><span>></</span><span>script</span><span>></span>
<br></spanmicrosoft>

Es ist noch ein langer Weg, Insekten, lebende Menschen können nicht erstickt werden, es gibt immer mehr Lösungen als Probleme. Ich weiß, dass PHP sehr gut darin ist, Dateien zu verarbeiten. Deshalb dachte ich darüber nach, PHP zu verwenden, um die JS- und CSS-Dateien im Index automatisch zu extrahieren, dann eine Batchdatei im angegebenen Format zu generieren, die Batchdatei stillschweigend im Hintergrund auszuführen und schließlich die Ergebnisse an den Monitor zurückzugeben. So kann ich mich zurücklehnen und die Ergebnisse genießen. Wenn ich darüber nachdenke, bin ich ein wenig aufgeregt, also habe ich einfach eine Schnittstelle geschrieben

Der nächste Schritt besteht darin, die Funktion zu implementieren. Beeilen Sie sich nicht, zuerst den Code zu schreiben, sondern analysieren Sie die Anforderungen:

1. Durchsuchen Sie die Datei index.html und extrahieren Sie JS-Dateien oder CSS-Dateien.

2. Filtern Sie diese Datei, da einige auskommentiert sind und andere zum Debuggen verwendet werden.

3. Generieren Sie die entsprechende Batchdatei

4. Batchdatei ausführen

5. Verarbeitungsergebnisse anzeigen

Da es zwei Situationen gibt, werde ich einen Fabrikmodus zur Anpassung verwenden, um die Erweiterung anderer Typen in Zukunft zu erleichtern, und ich muss eine längerfristige Sichtweise einnehmen. Nachdem wir nun die Fabrik haben, fügen wir einfach eine weitere Schnittstelle hinzu. Wir sind uns einig, dass die beiden Schnittstellen „Anforderungen empfangen“ und „Ergebnisse ausgeben“ implementiert werden müssen. Denken Sie noch einmal darüber nach: Sowohl js als auch css haben möglicherweise dieselben Funktionen. Lassen Sie sie eine übergeordnete Klasse erben, um Code wiederzuverwenden, sodass auch zuerst die Vererbung verwendet wird. Das aktuelle Design sollte meinen Anforderungen entsprechen, also habe ich angefangen, PHP-Code zu schreiben.

<?<span>php
</span><span>header</span>("Content-type: text/html; charset=utf-8"<span>);

</span><span>/*</span><span>*
 * 根据index.html文件中引用的js，生成compressJs.bat
 * @author frog <278500368@qq.com>
 * @date 2014-11-17
 <span>*/</span>

<span>interface</span><span> ICompress {
    </span><span>/*</span><span>*
     * 处理用户请求
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> request();

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> render();
}

</span><span>class</span><span> BaseCompress {
    </span><span>public</span> <span>$content</span><span>;
    </span><span>public</span> <span>$outPath</span><span>;
    </span><span>public</span> <span>$isAuto</span><span>;

    </span><span>public</span> <span>function</span> __construct(<span>$isAuto</span>=<span>false</span><span>){
        </span><span>$outPath</span> = '_file'<span>;
        </span><span>if</span>(!<span>is_dir</span>(<span>$outPath</span><span>)){
            </span><span>mkdir</span>(<span>$outPath</span><span>);
        }
        </span><span>$this</span>->outPath = <span>$outPath</span><span>;
        </span><span>$this</span>->isAuto = <span>$isAuto</span><span>;
    }


    </span><span>/*</span><span>*
     * 运行批处理
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span> runBat(<span>$name</span><span>){

    }
}

</span><span>/*</span><span>*
 * 压缩javascript文件
 * 合并javascript文件
 </span><span>*/</span>
<span>class</span> CompressJS <span>extends</span> BaseCompress <span>implements</span><span> ICompress {

    </span><span>/*</span><span>*
     * 处理用户请求
     * @return [type] [description]
     </span><span>*/</span>
    <span>public</span> <span>function</span><span> request(){

    }

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
        <span>public</span> <span>function</span><span> render(){}

}

</span><span>/*</span><span>*
 * 压缩样式文件
 </span><span>*/</span>
<span>class</span> CompressCSS <span>extends</span> BaseCompress <span>implements</span><span> ICompress {

    </span><span>public</span> <span>function</span><span> request(){
 
    }

    </span><span>/*</span><span>*
     * 处理输出结果
     * @return [type] [description]
     </span><span>*/</span>
         <span>public</span> <span>function</span><span> render(){}
     
}

</span><span>/*</span><span>*
 * 工厂类
 </span><span>*/</span>
<span>class</span><span> Factory {

    </span><span>public</span> <span>static</span> <span>function</span> create(<span>$type</span>,<span>$isAuto</span><span>){
        </span><span>$ob</span> = <span>null</span><span>;
        </span><span>switch</span> (<span>$type</span><span>) {
            </span><span>case</span> 'js':
                <span>$ob</span> = <span>new</span> CompressJS(<span>$isAuto</span><span>);
                </span><span>break</span><span>;
            </span><span>case</span> 'css':
                <span>$ob</span> = <span>new</span> CompressCSS(<span>$isAuto</span><span>);
                </span><span>break</span><span>;
            </span><span>default</span>:
                <span>#</span><span> code...</span>
                <span>break</span><span>;
        }
        </span><span>return</span> <span>$ob</span><span>;
    }
}</span>

Anschließend Bearbeitung aufrufen:

<span>//</span><span>处理ajax请求</span>
<span>if</span>(<span>isset</span>(<span>$_POST</span>['submit'<span>])){
    </span><span>//</span><span>是否自动执行批处理</span>
    <span>$isAuto</span> = <span>$_POST</span>['zip'] === 'true' ? <span>true</span> : <span>false</span><span>;
    </span><span>//</span><span>处理类型</span>
    <span>$type</span> = <span>$_POST</span>['type'<span>];

    </span><span>$c</span> = Factory::create(<span>$type</span>,<span>$isAuto</span><span>);<br>
    //接口方法
    </span><span>$c</span>-><span>request();
    </span><span>$c</span>-><span>render();

}</span><span>else</span><span>{
    </span><span>echo</span> '请使用静态页访问本程序:<a href="index.html">点此进入</a>'<span>;
}</span>

Das grobe Skelett kommt heraus. Der spezifische Codierungsprozess ist relativ einfach. Die etwas schwierigere Methode ist die Stapelverarbeitung.

Dies ist eine online bereitgestellte Methode, die möglicherweise in Zukunft verwendet wird. Deshalb poste ich sie hier:

<span>public</span> <span>function</span> runBat(<span>$name</span><span>){
        </span><span>if</span>(!<span>file_exists</span>(<span>$name</span>) || !<span>$this</span>-><span>isAuto){
            </span><span>return</span><span>;
        }
        </span><span>//</span><span>转入后台处理</span>
        @<span>exec</span>(<span>pclose</span>(<span>popen</span>("start /B ". <span>escapeshellcmd</span>(<span>$name</span>), "r"<span>)));
    }</span>

In der vorherigen index.html gibt es einen Namen = „noBuild“, den ich künstlich hinzugefügt habe. Dies liegt daran, dass ich auf diese Weise js-Dateien filtern möchte, wenn ich in Zukunft andere Dateien filtern möchte , ich muss nur das hinzufügen. Nur das Logo reicht aus, der PHP-Code muss nicht geändert werden. Da es für den internen Gebrauch bestimmt ist, gibt es kein Formularelement zur Angabe des Pfads des Projekts. Standardmäßig ist das Verzeichnis der oberen Ebene, in dem sich index.html befindet, das Projektverzeichnis. Dieses Design vereinfacht die Bedienung und verbessert die Effizienz.

Zum Durchlaufen bestimmter Dateien empfehle ich die Glob-Funktion, eine sehr einfache Lösung:

<span>$files</span> = <span>glob</span>(<span>$path</span>.'/*.css',GLOB_NOSORT);

Das Folgende ist das Strukturdiagramm des Projektverzeichnisses:

Eine weitere Operation zum Rendern:

Das letzte ist das Bild des Verarbeitungsergebnisses:

Endlich muss ich keine Grunt-Konfiguration mehr schreiben und Node installieren. Ich muss mir beim Aktualisieren keine Sorgen mehr machen, dass ich eine Menge Node-Sachen herunterziehe

Anscheinend habe ich vergessen, den Front-End-Code anzuzeigen:

<span>/*</span><span>*
 * 选项卡类
 * @param {string} id 选项卡的ID
 </span><span>*/</span>
<span>function</span><span> Tabs(id){
    </span><span>var</span> node = document.querySelector('#'+<span>id);
    </span><span>var</span> selected = node.querySelector('.selected'<span>);
    </span><span>this</span>.selected =<span> selected;
    </span><span>this</span>.node =<span> node;
    </span><span>this</span><span>.bindEvent();
}

</span><span>/*</span><span>*
 * 切换选项卡
 * @param  {object} event 事件
 * @return {[type]}   [description]
 </span><span>*/</span><span>
Tabs.prototype.change </span>= <span>function</span><span>(event){
    </span><span>var</span> element =<span> event.target;
    </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){
        </span><span>if</span>(element.className=='selected'<span>){
            </span><span>return</span><span>;
        }
    }</span><span>else</span><span>{
        </span><span>while</span>(element != <span>this</span><span>.node){
            element </span>=<span> element.parentNode;
            </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){
                </span><span>break</span><span>;
            }
        }
        </span><span>if</span>(element == <span>this</span>.node) <span>return</span><span>;
    }
    </span><span>this</span>.selected.removeAttribute('class'<span>);
    element.className </span>= 'selected'<span>;
    </span><span>this</span>.selected =<span> element;
    </span><span>this</span><span>.content();
}

Tabs.prototype.content </span>= <span>function</span><span>(){
  </span><span>var</span> form =<span> document.form1;

    </span><span>switch</span>(<span>this</span><span>.getTabType()){
      </span><span>case</span> 'js'<span>:
        form.style.display </span>= 'block'<span>;
        form.children[</span>0].innerHTML = '自动压缩JS'<span>;
        </span><span>break</span><span>;
      </span><span>case</span> 'css'<span>:
        form.style.display </span>= 'block'<span>;
        form.children[</span>0].innerHTML = '自动压缩CSS'<span>;
        </span><span>break</span><span>;
      </span><span>default</span><span>:
    }
}</span>

Ich kenne sowohl Front-End als auch Back-End, also bin ich so eigensinnig. Nur ein Klick und verabschieden Sie sich von den Sorgen! Stellen Sie Ihre eigenen Werkzeuge her und überlassen Sie die harte Arbeit anderen. So einfach!

Das Obige ist eine Einführung, wie man es selbst macht und genügend Essen und Kleidung hat. Es enthält die relevanten Inhalte. Ich hoffe, es wird für Freunde hilfreich sein, die sich für PHP-Tutorials interessieren.