Home Backend Development PHP Tutorial thinkphp5 (tp5) integrates gulp into the project to compress static resources

thinkphp5 (tp5) integrates gulp into the project to compress static resources

May 28, 2018 pm 09:30 PM
gulp php thinkphp5

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 resourcesStep 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['HTTP_HOST'] == 'www.php.cn'){
    
    //控制文件的调用
    define('STATICS', '/dist');  //静态文件调用路径
    define('TEMPL', '../dist/');  //模板文件调用路径
    
    //控制是否需要显示错误信息
    define('IS_DEBUG', false);  //是否debug
    define('ERR_TPL', THINK_PATH . 'tpl' . DS . 'error.tpl');  //错误模板
    
    //数据库配置
    define('HOST_NAME', 'xxx.xx.xx.x');  //数据库地址
    define('USERNAME', 'xxx');  //用户名
    define('PASSWORD', 'xxxxx');  //密码
    
}else{
    
    //控制文件的调用
    define('STATICS', '/static/assets');
    define('TEMPL', '../template/');

    
    //控制是否需要显示错误信息
    define('IS_DEBUG', true);  //是否debug
    define('ERR_TPL', THINK_PATH . 'tpl' . DS . 'think_exception.tpl');  //错误模板
    
    //数据库配置
    define('HOST_NAME', '127.0.0.1');  //数据库地址
    define('USERNAME', 'xxx');  //用户名
    define('PASSWORD', 'xxx');  //密码
}
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 [
     'template' => [
        
         //模板路径
         'view_path'=> TEMPL,
         
        //定义模板布局
        'layout_on'     =>  true,
        'layout_name'   =>  'layout',
        'layout_item'   =>  '{__CONTENT__}'
        
    ],
];
Copy after login

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

// 应用调试模式
    'app_debug'              => IS_DEBUG,
    
// 视图输出字符串内容替换
    'view_replace_str'       => [
        '__STATIC__' => STATICS,
    ],
    
// 异常页面的模板文件
    'exception_tmpl'         => ERR_TPL,
    
// 显示错误信息
    'show_error_msg'         => 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('gulp');
    runSequence = require('run-sequence'), 
    clearnHtml  = require('gulp-cleanhtml'),
    minifyInline  = require('gulp-minify-inline-scripts'),
    imagemin = require('gulp-imagemin');
    uglify = require('gulp-uglify');
    cleanCss = require('gulp-clean-css');
    rev = require('gulp-rev');
    del = require('del');
    revCollector = require('gulp-rev-collector');
    browserSync = require('browser-sync').create(),
    reload      = browserSync.reload;
    
var dir = './bolg/dist';    
var dir2= './bolg/public/dist';    

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

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

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

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

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


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


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


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


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

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

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

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

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


//清除开发文件夹(dist)
 gulp.task('clear', 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1255
24
PHP: A Key Language for Web Development PHP: A Key Language for Web Development Apr 13, 2025 am 12:08 AM

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

PHP and Python: Comparing Two Popular Programming Languages PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

PHP vs. Python: Understanding the Differences PHP vs. Python: Understanding the Differences Apr 11, 2025 am 12:15 AM

PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.

PHP in Action: Real-World Examples and Applications PHP in Action: Real-World Examples and Applications Apr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

The Enduring Relevance of PHP: Is It Still Alive? The Enduring Relevance of PHP: Is It Still Alive? Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

PHP vs. Other Languages: A Comparison PHP vs. Other Languages: A Comparison Apr 13, 2025 am 12:19 AM

PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

PHP and Python: Different Paradigms Explained PHP and Python: Different Paradigms Explained Apr 18, 2025 am 12:26 AM

PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.

PHP and Python: Code Examples and Comparison PHP and Python: Code Examples and Comparison Apr 15, 2025 am 12:07 AM

PHP and Python have their own advantages and disadvantages, and the choice depends on project needs and personal preferences. 1.PHP is suitable for rapid development and maintenance of large-scale web applications. 2. Python dominates the field of data science and machine learning.

See all articles