thinkphp5 (tp5) integriert gulp in das Projekt, um statische Ressourcen zu komprimieren-PHP-Tutorial-php.cn

Ich frage mich, ob Sie jedes Mal, wenn Sie Code übermitteln, auf die Mühe stoßen werden, config.php und Database.php manuell zu deaktivieren. (Die config.php-Datei öffnet und schließt den Debugging-Modus offline und online und zeigt Fehler in der Datenbank.php-Konfiguration für Offline- und Online-Datenbanken an und schließt sie.)
Jedenfalls habe ich ihre Auswahl jedes Mal manuell deaktiviert, wenn ich Code an Git gesendet habe Senden Sie es. (Mit svn können Sie sie an den Ort verschieben, an dem die Dateien ignoriert werden, aber Git wird immer noch angezeigt, damit Sie es festschreiben können, auch wenn es die Änderungen ignoriert ...).
Lassen Sie uns nicht darüber reden, wie langweilig das ist. Manchmal vergisst man, den Code abzubrechen und dann zu übermitteln.
Aber sobald er an die offizielle Umgebung übermittelt wird, werden die Konsequenzen auftreten wirklich katastrophal!
Thinkphp5 integriert also ohne weiteres gulp in das Projekt, um die Zusammenführung, Komprimierung und das MD5-Suffix statischer Ressourcen zu realisieren, und schreibt meine eigene Lösung (Experten, die bessere Lösungen haben, können gerne darüber diskutieren).

Schauen Sie sich zunächst meine Verzeichnisstruktur an:
thinkphp5 (tp5) integriert gulp in das Projekt, um statische Ressourcen zu komprimieren Schritt 1

: Öffnen Sie die thinkphpstart-Bootdatei im Stammverzeichnis von Thinkphp5 und fügen Sie den folgenden Code hinzu:
// Ressourcen und Vorlagenverwendungsverzeichnis definieren

// 定义资源和模板使用目录
if($_SERVER[&#39;HTTP_HOST&#39;] == &#39;m.sbmmt.com&#39;){
    
    //控制文件的调用
    define(&#39;STATICS&#39;, &#39;/dist&#39;);  //静态文件调用路径
    define(&#39;TEMPL&#39;, &#39;../dist/&#39;);  //模板文件调用路径
    
    //控制是否需要显示错误信息
    define(&#39;IS_DEBUG&#39;, false);  //是否debug
    define(&#39;ERR_TPL&#39;, THINK_PATH . &#39;tpl&#39; . DS . &#39;error.tpl&#39;);  //错误模板
    
    //数据库配置
    define(&#39;HOST_NAME&#39;, &#39;xxx.xx.xx.x&#39;);  //数据库地址
    define(&#39;USERNAME&#39;, &#39;xxx&#39;);  //用户名
    define(&#39;PASSWORD&#39;, &#39;xxxxx&#39;);  //密码
    
}else{
    
    //控制文件的调用
    define(&#39;STATICS&#39;, &#39;/static/assets&#39;);
    define(&#39;TEMPL&#39;, &#39;../template/&#39;);

    
    //控制是否需要显示错误信息
    define(&#39;IS_DEBUG&#39;, true);  //是否debug
    define(&#39;ERR_TPL&#39;, THINK_PATH . &#39;tpl&#39; . DS . &#39;think_exception.tpl&#39;);  //错误模板
    
    //数据库配置
    define(&#39;HOST_NAME&#39;, &#39;127.0.0.1&#39;);  //数据库地址
    define(&#39;USERNAME&#39;, &#39;xxx&#39;);  //用户名
    define(&#39;PASSWORD&#39;, &#39;xxx&#39;);  //密码
}

Nach dem Login kopieren

(Hinweis: xxx sind Daten, die entsprechend Ihrer tatsächlichen Situation geändert werden müssen)

1. Fügen Sie die Datei config.php hinzu oder ändern Sie sie unter dem Indexmodul zum folgenden Code:

//配置文件
return [
     &#39;template&#39; => [
        
         //模板路径
         &#39;view_path&#39;=> TEMPL,
         
        //定义模板布局
        &#39;layout_on&#39;     =>  true,
        &#39;layout_name&#39;   =>  &#39;layout&#39;,
        &#39;layout_item&#39;   =>  &#39;{__CONTENT__}&#39;
        
    ],
];

Nach dem Login kopieren

2. Ersetzen oder fügen Sie den folgenden Code in der gesamten config.php-Datei hinzu:

// 应用调试模式
    &#39;app_debug&#39;              => IS_DEBUG,
    
// 视图输出字符串内容替换
    &#39;view_replace_str&#39;       => [
        &#39;__STATIC__&#39; => STATICS,
    ],
    
// 异常页面的模板文件
    &#39;exception_tmpl&#39;         => ERR_TPL,
    
// 显示错误信息
    &#39;show_error_msg&#39;         => IS_DEBUG,

Nach dem Login kopieren

3. Verwenden Sie dann __STATIC__ der Ressourcenpfad in allen Ressourcenreferenzen:
Zum Beispiel: __STATIC__/js/jquery.min.js

Die oben genannten sind einige Konfigurationen für Thinkphp5
Im Folgenden wird mit der Integration von gulp in das thinkphp5-Projekt begonnen

Der zweite Schritt: Erstellen Sie package.json im Stammverzeichnis des Projekts.

{
  "name": "zhuzong",
  "version": "0.0.1",
  "description": "资源鸟",
  "scripts": {},
  "author": "zhuzong",
  "license": "Apache2",
  "devDependencies": {
    "browser-sync": "^2.14.0",
    "del": "^2.2.1",
    "gulp": "^3.9.1",
    "run-sequence":"^1.2.2",
    "gulp-clean-css": "^2.0.12",
    "gulp-csscomb": "^3.0.7",
    "gulp-cleanhtml": "^1.0.1",
    "gulp-minify-inline-scripts":"0.0.6",
    "gulp-imagemin": "^3.0.2",
    "gulp-rev": "^7.1.0",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }
}

Nach dem Login kopieren

Schritt 3: Erstellen Sie gulpfile.js im Stammverzeichnis des Projekts >

Fügen Sie src in gulpfile.js ein und ersetzen Sie die dist-Variable durch das tatsächliche Verzeichnis Ihres Projekts.

Ersetzen Sie Proxy durch Ihren lokalen benutzerdefinierten Domänennamen.

// gulpfile.js
var gulp = require(&#39;gulp&#39;);
    runSequence = require(&#39;run-sequence&#39;), 
    clearnHtml  = require(&#39;gulp-cleanhtml&#39;),
    minifyInline  = require(&#39;gulp-minify-inline-scripts&#39;),
    imagemin = require(&#39;gulp-imagemin&#39;);
    uglify = require(&#39;gulp-uglify&#39;);
    cleanCss = require(&#39;gulp-clean-css&#39;);
    rev = require(&#39;gulp-rev&#39;);
    del = require(&#39;del&#39;);
    revCollector = require(&#39;gulp-rev-collector&#39;);
    browserSync = require(&#39;browser-sync&#39;).create(),
    reload      = browserSync.reload;
    
var dir = &#39;./bolg/dist&#39;;    
var dir2= &#39;./bolg/public/dist&#39;;    

//复制html
gulp.task(&#39;copyHtml&#39;, function(){
   return gulp.src(&#39;./bolg/template/**/*.html&#39;)
    .pipe(clearnHtml())
    .pipe(minifyInline())
    .pipe(gulp.dest(dir));    
});

//复制Css
gulp.task(&#39;copyCss&#39;,function(){
   return gulp.src([&#39;./bolg/public/static/assets/css/*.css&#39;,&#39;./bolg/public/static/assets/demo/css/*.css&#39;])
    .pipe(cleanCss({conpatibility: &#39;ie8&#39;}))   
    .pipe(rev())        
    .pipe(gulp.dest(dir2+&#39;/css&#39;))        
    .pipe(rev.manifest())       
    .pipe(gulp.dest(dir+&#39;/manifest/css&#39;));
});

//复制字体
gulp.task(&#39;copyFont&#39;,function(){
   return gulp.src(&#39;./bolg/public/static/assets/fonts/*&#39;)
    .pipe(gulp.dest(dir2+&#39;/fonts&#39;))
});

//复制JS
gulp.task(&#39;copyJs&#39;, function(){
   return gulp.src([&#39;./bolg/public/static/assets/js/*.js&#39;,&#39;./bolg/public/static/assets/demo/js/*.js&#39;])
    .pipe(uglify())   
    .pipe(rev())
    .pipe(gulp.dest(dir2+&#39;/js&#39;))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+&#39;/manifest/js&#39;));
});

//复制图片
gulp.task(&#39;copyImg&#39;, function () {
   return gulp.src(&#39;./bolg/public/static/assets/images/**/*&#39;)
    .pipe(imagemin())   
    .pipe(rev())
    .pipe(gulp.dest(dir2+&#39;/images&#39;))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+&#39;/manifest/images&#39;));
});


//对html中的静态资源（css,js,image)进行MD5后的文件引用替换
gulp.task(&#39;rev&#39;, function(){
    return gulp.src([dir+&#39;/manifest/**/*.json&#39;, dir+&#39;/**/*.html&#39;])     //找到json，和目标html文件路径
     .pipe(revCollector({
         replaceReved: true,
     }))     
     .pipe(gulp.dest(dir));
 });


 //监视文件，并进行自动操作 task : server
 gulp.task(&#39;server&#39;,function(){
    browserSync.init({
        proxy : &#39;http://www.blog.com&#39;,
        notify: false, // 刷新不弹出提示
    });
    
    gulp.watch(&#39;./bolg/template/**/*.html&#39;, [&#39;html&#39;]);   
    gulp.watch(&#39;./bolg/public/static/assets/css/*.css&#39;, [&#39;css&#39;]);
    gulp.watch(&#39;./bolg/public/static/assets/js/*.js&#39;, [&#39;js&#39;]); 
    gulp.watch(&#39;./bolg/public/static/assets/images/**/*.{jpg,png}&#39;,[&#39;img&#39;]); 
});


//设置默认任务 task : default
gulp.task(&#39;default&#39;, function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
    [&#39;clear&#39;],
    [&#39;copyImg&#39;],
    [&#39;copyHtml&#39;],
    [&#39;copyCss&#39;],
    [&#39;copyFont&#39;],
    [&#39;copyJs&#39;],
        [&#39;rev&#39;],  
        [&#39;server&#39;],   
        done);  
});


//html
gulp.task(&#39;html&#39;, function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
    [&#39;copyHtml&#39;],
        [&#39;rev&#39;],  
        [&#39;bwrel&#39;],  
        done);  
});

//css
gulp.task(&#39;css&#39;, function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
    [&#39;copyCss&#39;],
        [&#39;rev&#39;],  
        [&#39;bwrel&#39;],  
        done);  
});

//js
gulp.task(&#39;js&#39;, function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
    [&#39;copyJs&#39;],
        [&#39;rev&#39;],  
        [&#39;bwrel&#39;],  
        done);  
});

//img
gulp.task(&#39;img&#39;, function (done) {  
    condition = false;  
    //依次顺序执行  
    runSequence(  
    [&#39;copyImg&#39;],
        [&#39;rev&#39;],  
        [&#39;bwrel&#39;],  
        done);  
});

//reload
gulp.task(&#39;bwrel&#39;, function(){
    gulp.watch(dir+&#39;/**/*.html&#39;).on("change", reload);  
});


//清除开发文件夹（dist)
 gulp.task(&#39;clear&#39;, function(){
     del(dir);
     del(dir2);
 });

Nach dem Login kopieren

Schritt 4: Führen Sie den folgenden Befehl aus Befehlszeile (vorausgesetzt, node.js und gulp wurden installiert):

Wenn nichts schief geht, wird der Browser automatisch kompiliert und geöffnet.

# 安装各种包
cnpm install
# 运行gulp
gulp

Nach dem Login kopieren

Die folgenden sind komprimiert Die rot markierten Dateien werden nach MD5 durch Dateiverweise ersetzt.

Bisher ist die Einführung der thinkphp5-Integration mit gulp abgeschlossen. Wenn es Fehler oder unangemessene Punkte gibt, weisen Sie uns bitte darauf hin und lassen Sie uns alle gemeinsam vorankommen!

Das obige ist der detaillierte Inhalt vonthinkphp5 (tp5) integriert gulp in das Projekt, um statische Ressourcen zu komprimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!