thinkphp5(tp5)는 gulp를 프로젝트에 통합하여 정적 리소스를 압축합니다.

코드를 제출할 때마다 config.php와 Database.php의 선택을 수동으로 취소해야 하는 문제에 직면하게 되는지 궁금합니다. (config.php 파일은 오프라인과 온라인에서 디버깅 모드를 열고 닫으며, 데이터베이스.php 오프라인과 온라인 데이터베이스 구성 오류를 표시하고 닫습니다.)
어쨌든, 코드를 제출하기 전에 git에 코드를 제출할 때마다 수동으로 선택 항목을 선택 취소하곤 했습니다( svn을 사용하면 파일이 무시되는 위치로 파일을 이동할 수 있지만 git은 수정 사항을 무시하더라도 커밋할 수 있도록 팝업이 계속 표시됩니다...).
지루하다는 얘기는 하지 말자. 때로는 코드를 제출하느라 바빠서 취소하는 것을 잊었을 때 제출하는 것이 정상이다.
하지만 일단 공식 환경에 제출하면 그 결과는 정말 처참할 것이다!
그래서 더 이상 고민하지 않고 이번에 thinkphp5는 gulp를 프로젝트에 통합하여 정적 리소스의 병합, 압축 및 MD5 접미사를 구현해 보겠습니다. 우리만의 솔루션을 함께 작성해 보겠습니다. (더 나은 솔루션이 있는 전문가는 토론을 환영합니다.)

먼저 내 디렉터리 구조를 살펴보세요.
1단계

: Thinkphp5 루트 디렉터리에서 thinkphpstart 부팅 파일을 열고 다음 코드를 추가합니다.
// 리소스 및 템플릿 사용 디렉터리 정의

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

(참고: xxx 자신의 실제 상황에 따라 수정되는 데이터가 필요합니다.)

1. index 모듈 아래의 config.php 파일을 다음 코드에 추가하거나 수정합니다.

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

2. 전체 구성에서 다음 코드를 바꾸거나 추가합니다. php 파일:

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

3. 그런 다음 모든 리소스 참조는 리소스 경로 대신 __STATIC__을 사용합니다.
예: __STATIC__/js/jquery.min.js

위는 Thinkphp5에 대한 일부 구성입니다
다음은 gulp를 에 통합하기 시작합니다. thinkphp5 프로젝트

두 번째 단계; thinkphp5 프로젝트 루트 디렉터리에 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"
  }
}

3단계; thinkphp5 프로젝트 루트 디렉터리에 gulpfile.js 만들기;

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

gulpfile.js에서 src 및 dist 변수 바꾸기
프록시를 자신의 로컬 사용자 정의 도메인 이름으로 바꿉니다.

4단계: 명령줄에서 다음 명령을 실행합니다(node.js 및 gulp가 설치되어 있는 경우).

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

아무 것도 없는 경우 예상치 못한 일이 발생하면 자동으로 컴파일되어 탐색용으로 열립니다.

다음은 압축 파일입니다. 빨간색으로 표시된 경로는 MD5 이후에 대체된 파일 참조입니다.
이것이 thinkphp5와 gulp 통합에 대한 소개의 끝입니다. 잘못된 점이나 부적절한 부분이 있으면 지적해 주시고 우리 모두 함께 발전해 나가도록 해주세요!

위 내용은 thinkphp5(tp5)는 gulp를 프로젝트에 통합하여 정적 리소스를 압축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!