thinkphp5 (tp5) integrates gulp into the project to compress static resources-PHP Tutorial-php.cn

I don’t know if you will encounter the trouble of manually unchecking config.php and database.php every time you submit code. (The config.php file opens and closes debugging mode offline and online, and displays and closes the error database.php offline and online database configuration)
Anyway, I used to manually uncheck their selections every time I submitted code to git before submitting it. (With svn, you can move them to the location where the files are ignored, but git will still pop up for you to commit even if it ignores the modifications...).
Let’s not talk about whether it is tedious or not. Sometimes when you are busy submitting code and forget to cancel it, it is normal to submit it.
But once it is submitted to the official environment, the consequences will be really disastrous!
So without further ado, thinkphp5 integrates gulp into the project to realize the merging, compression, and MD5 suffix of static resources and writes out my own solution (the experts who have better solutions are welcome to discuss) .

Let’s take a look at my directory structure first:
thinkphp5 (tp5) integrates gulp into the project to compress static resources Step one

: Open the thinkphp\start boot file in the root directory of Thinkphp5 and add the following code:
// Define the resource and template usage directory

// 定义资源和模板使用目录
if($_SERVER[&#39;HTTP_HOST&#39;] == &#39;www.php.cn&#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;);  //密码
}

Copy after login

(Note: xxx is the data that needs to be modified according to your actual situation)

1. Add or modify the config.php file under the index module to the following 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;
        
    ],
];

Copy after login

2. Replace or add the following code in the overall config.php file:

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

Copy after login

3. Then use __STATIC__ in all resource references instead of the resource path:
For example: __STATIC__/js/jquery.min.js

The above are some configurations for Thinkphp5
The following starts to integrate gulp into the thinkphp5 project

The second step; in the thinkphp5 project root directory Create package.json;

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

Copy after login

The third step; create gulpfile.js in the thinkphp5 project root directory;

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

Copy after login

Replace the src and dist variables in gulpfile.js with the actual ones of your own project Directory;
Replace proxy with your own local custom domain name;

Step 4: Run the following command on the command line (provided that node.js and gulp have been installed):

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

Copy after login

If nothing unexpected happens; it will automatically compile and open the browser;

The following is the compressed file. The path marked in red is the path replaced by the file reference after MD5.
So far thinkphp5 integration This concludes the introduction to gulp. If there are any errors or inappropriate points, please point them out and let us all make progress together!

The above is the detailed content of thinkphp5 (tp5) integrates gulp into the project to compress static resources. For more information, please follow other related articles on the PHP Chinese website!