thinkphp5 (tp5) intègre gulp dans le projet pour compresser les ressources statiques-tutoriel php-php.cn

thinkphp5 (tp5) intègre gulp dans le projet pour compresser les ressources statiques

PHP中文网

Libérer： 2023-03-14 14:50:01

original

2859 Les gens l'ont consulté

Je me demande si vous rencontrerez le problème de décocher manuellement config.php et database.php chaque fois que vous soumettez du code. (Le fichier config.php ouvre et ferme le mode de débogage hors ligne et en ligne, et affiche et ferme les erreurs de configuration database.php pour les bases de données hors ligne et en ligne)
Quoi qu'il en soit, j'avais l'habitude de décocher manuellement leurs sélections à chaque fois que je soumettais du code à git auparavant en le soumettant. (Avec svn, vous pouvez les déplacer vers l'emplacement où les fichiers sont ignorés, mais git apparaîtra toujours pour que vous puissiez les valider même s'il ignore les modifications...).
Ne parlons pas de l'ennui de cela. Parfois, lorsque vous êtes occupé à soumettre du code, vous oubliez de l'annuler puis de le soumettre.
Mais une fois soumis à l'environnement officiel, les conséquences seront. vraiment désastreux !
Donc, sans plus tarder, thinkphp5 intègre gulp dans le projet pour réaliser la fusion, la compression et le suffixe MD5 des ressources statiques et écrit ma propre solution (les experts qui ont de meilleures solutions sont invités à en discuter).

Jetez d'abord un œil à ma structure de répertoires :
thinkphp5 (tp5) intègre gulp dans le projet pour compresser les ressources statiques Étape 1

: Ouvrez le fichier de démarrage thinkphpstart dans le répertoire racine de Thinkphp5 et ajoutez le code suivant :
// Définir les ressources et le répertoire d'utilisation des modèles

// 定义资源和模板使用目录
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;);  //密码
}

Copier après la connexion

(Remarque : xxx sont des données qui doivent être modifiées en fonction de votre situation réelle)

1. Ajoutez ou modifiez le fichier config.php. sous le module d'index au code suivant :

//配置文件
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;
        
    ],
];

Copier après la connexion

2. Remplacez ou ajoutez le code suivant dans le fichier config.php global :

// 应用调试模式
    &#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,

Copier après la connexion

3. Utilisez ensuite __STATIC__ pour remplacer. le chemin de la ressource dans toutes les références de ressources. :
Par exemple : __STATIC__/js/jquery.min.js

Voici quelques configurations pour Thinkphp5
Ce qui suit commence à intégrer gulp dans le projet thinkphp5.

La deuxième étape : dans thinkphp5, créez package.json dans le répertoire racine du projet

{
  "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"
  }
}

Copier après la connexion

<🎜 ; >

Mettez src dans gulpfile.js et remplacez la variable dist par le répertoire réel de votre projet ;

Remplacez le proxy par votre nom de domaine personnalisé local

// 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);
 });

Copier après la connexion

Étape 4 : Exécutez la commande suivante sur le ; ligne de commande (à condition que node.js et gulp aient été installés) :

Si rien ne va pas, il compilera et ouvrira automatiquement le navigateur

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

Copier après la connexion

Voici les éléments compressés ; fichiers. Ceux marqués en rouge sont remplacés par des références de fichiers après MD5. Le chemin

Jusqu'à présent, l'introduction de l'intégration de thinkphp5 avec gulp est terminée. S’il y a des erreurs ou des points inappropriés, n’hésitez pas à les signaler et avançons tous ensemble !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!