不知道大家是否会遇到每次代码提交都手动取消选中config.php和database.php的烦恼。（config.php文件线下线上打开关闭调试模式和显示关闭错误 database.php线下线上数据库的配置）
反正我以前是每次git提交代码都手动的取消他们的选中状态再提交的 ( svn的话可以把他们移动到忽略文件的位置 但git就算忽略了 修改后还是会弹出来让你提交...)。
这样先不说繁琐不繁琐 有时候忙着提交代码忘记取消他们就提交了这很正常
但是一旦提交到正式环境那后果真是灾难性的！
所以闲话不多说了 借着这次thinkphp5整合gulp到项目实现静态资源的合并、压缩、MD5后缀 一起就把自己的解决方案写出来（大牛们有更好的解决方案欢迎探讨）。
先看看我的目录结构：
第一步
：打开Thinkphp5根目录下的 thinkphp\start 引导文件 添加以下代码：
// 定义资源和模板使用目录
// 定义资源和模板使用目录 if($_SERVER['HTTP_HOST'] == 'm.sbmmt.com'){ //控制文件的调用 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、在总的config.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" } }
第三步；在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 变量替换为自己项目的实际目录；
把proxy 替换为自己的本地自定义域名；
第四步： 命令行运行如下命令（前提是已经安装好node.js和gulp ）：
# 安装各种包 cnpm install # 运行gulp gulp
如果不出意外；会自动编译并打开浏览器了；
以下就是被压缩过的文件 标红的是经过MD5后的文件引用替换过的路径
到此为止thinkphp5整合gulp就介绍完了。有任何错误和不合适的地方欢迎指出，大家一起共同进步！
위 내용은 thinkphp5(tp5)整合gulp到项目实现静态资源的压缩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
