简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 백엔드 개발 > PHP 튜토리얼 > 본문

스스로 행하고 음식과 의복을 충분히 갖추라.

WBOY
풀어 주다： 2016-08-08 09:32:39
원래의
882명이 탐색했습니다.

Grunt는 요즘 매우 인기가 많습니다. 사용하기는 재미있지만 구성이 정말 짜증스럽습니다. 이전에 사용해 본 적이 없고 빨리 익히고 싶다면 일정한 학습 비용이 발생하며 프로젝트 시작 시 패키징을 위해 경량 도구 컴파일러.jar을 선택했습니다. . 원클릭 패키징 도구를 작성하는 방법에 대해 고민해왔습니다. 이전에는 일부 js 파일을 컴파일러.jar 패키징 파일의 요구 사항을 충족하는 배치 파일에 수동으로 연결한 다음 이 배치를 실행하여 필요한 js 및 css 파일을 생성했습니다. js 파일의 수가 많아질수록 이들 파일의 주소를 수동으로 이어붙이는 일은 매우 까다로워지고, 특정 파일을 놓치거나 복제하는 일도 쉽기 때문에 '원클릭 패키징 도구' 작성이 시급해집니다. 다음은 실제 index.html 파일의 일부입니다: 

<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>
로그인 후 복사

아직 갈 길이 멀다, 벌레, 살아있는 사람이 오줌을 누다 목이 막혀 죽을 수는 없다, 언제나 문제보다는 해결책이 더 많다. 나는 PHP에 대해 조금 알고 있습니다. PHP는 파일 처리에 매우 능숙합니다. 이제 PHP가 그 역할을 하게 될 것입니다. 그래서 PHP를 사용하여 인덱스에서 js와 ​​css를 자동으로 추출한 다음 지정된 형식의 배치 파일을 생성하고 백그라운드에서 자동으로 배치 파일을 실행하고 마지막으로 결과를 모니터에 반환하는 방법을 생각했습니다. 이렇게 하면 편안히 앉아서 결과를 즐길 수 있습니다. 생각만 해도 좀 설레서 간단하게 인터페이스를 작성해 봤습니다.

다음 단계는 함수를 구현하는 것입니다. 먼저 코드를 작성하기 위해 서두르지 말고 요구 사항을 분석하세요.

1. index.html 파일을 탐색하여 js 파일 또는 css 파일을 추출합니다.

2. 일부는 주석 처리되고 일부는 디버깅에 사용되므로 이 파일을 필터링합니다.

3. 해당 배치 파일을 생성합니다

4. 배치 파일 실행

5. 처리 결과 표시

두 가지 상황이 있기 때문에 앞으로 다른 유형의 확장이 용이하도록 적응하기 위해 공장 모드를 사용할 것이며 장기적인 관점을 가져야 합니다. 이제 공장이 생겼으니 다른 인터페이스를 추가하기만 하면 됩니다. "요청 수신"과 "결과 출력"이라는 두 가지 인터페이스를 구현해야 한다는 데 동의했습니다. 다시 생각해 보세요. js와 css 모두 동일한 기능을 가질 수 있습니다. 코드를 재사용하기 위해 상위 클래스를 상속하게 하므로 상속도 먼저 사용됩니다. 현재 디자인이 내 요구 사항을 충족해야 하므로 PHP 코드 작성을 시작했습니다.

<?<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>
로그인 후 복사

그런 다음 통화 처리: 

<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>
로그인 후 복사

거친 뼈대가 나옵니다. 구체적인 코딩 과정은 비교적 간단합니다. 조금 더 어려운 방법은 일괄 처리를 수행하는 것입니다.

이 방법은 온라인에서 제공되는 방법으로 향후에도 활용될 수 있어 여기에 게시합니다: 

<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>
로그인 후 복사

이전 index.html에는 인위적으로 추가한 name="noBuild"가 있습니다. 이는 나중에 다른 파일을 필터링하려는 경우 이 식별자로 js 파일을 필터링하고 싶기 때문입니다. , 이것만 추가하면 됩니다. 로고만 있으면 충분합니다. PHP 코드를 변경할 필요가 없습니다. 내부용이므로 프로젝트 경로를 지정하는 폼 항목이 없습니다. 기본적으로 index.html이 있는 상위 디렉터리가 프로젝트 디렉터리입니다. 이 디자인은 작동을 단순화하고 효율성을 향상시킵니다.

특정 파일 탐색과 관련하여 매우 간단한 솔루션인 glob 기능을 권장합니다. 

<span>$files</span> = <span>glob</span>(<span>$path</span>.'/*.css',GLOB_NOSORT);
로그인 후 복사

다음은 프로젝트 디렉토리 구조 다이어그램입니다.

또 다른 작업 렌더링:

마지막 처리 결과 사진입니다:

마침내 더 이상 그런트 구성을 작성하고 노드를 설치할 필요가 없습니다. 이제 업데이트할 때 svn에서 많은 노드 항목을 끌어내리는 것에 대해 걱정할 필요가 없습니다.

프런트엔드 코드를 표시하는 것을 잊어버린 것 같습니다. 

<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>
로그인 후 복사

저는 프론트엔드와 백엔드를 모두 알고 있어서 의욕이 넘칩니다. 클릭 한 번으로 걱정은 이제 안녕! 자신만의 도구를 만들고 다른 사람들이 어려운 작업을 하도록 하세요. 정말 쉽습니다!

위 내용은 스스로 할 수 있는 방법과 충분한 음식과 의복을 갖추는 방법에 대한 소개입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.

관련 라벨：
bug css html index php
원천：php.cn
이전 기사：[php] 기본 ​​구문 및 페이지 간 값 전송 다음 기사：아라비아 숫자를 중국어로
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
에서 2024-04-06 17:27:56
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！