thinkphp5(tp5)整合gulp到项目实现静态资源的压缩-php教程-PHP中文网

thinkphp5(tp5)整合gulp到项目实现静态资源的压缩

PHP中文网

发布： 2018-05-28 21:30:14

原创

2488人浏览过

不知道大家是否会遇到每次代码提交都手动取消选中config.php和database.php的烦恼。（config.php文件线下线上打开关闭调试模式和显示关闭错误 database.php线下线上数据库的配置）
反正我以前是每次git提交代码都手动的取消他们的选中状态再提交的 ( svn的话可以把他们移动到忽略文件的位置但git就算忽略了修改后还是会弹出来让你提交...)。
这样先不说繁琐不繁琐有时候忙着提交代码忘记取消他们就提交了这很正常
但是一旦提交到正式环境那后果真是灾难性的！
所以闲话不多说了借着这次thinkphp5整合gulp到项目实现静态资源的合并、压缩、md5后缀一起就把自己的解决方案写出来（大牛们有更好的解决方案欢迎探讨）。

先看看我的目录结构：
第一步

：打开Thinkphp5根目录下的 thinkphp\start 引导文件添加以下代码：
// 定义资源和模板使用目录

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

登录后复制

（注：xxx是需要根据自己的实际情况修改的数据）

1、在index模块下的config.php文件增加或修改成以下代码：

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

登录后复制

2、在总的config.php文件中替换或增加以下代码：

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

登录后复制

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(&#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);
 });

登录后复制

把 gulpfile.js 中的src 和 dist 变量替换为自己项目的实际目录；
把proxy 替换为自己的本地自定义域名；

第四步：命令行运行如下命令（前提是已经安装好node.js和gulp ）：

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

登录后复制

如果不出意外；会自动编译并打开浏览器了；

以下就是被压缩过的文件标红的是经过MD5后的文件引用替换过的路径
到此为止thinkphp5整合gulp就介绍完了。有任何错误和不合适的地方欢迎指出，大家一起共同进步！

以上就是thinkphp5(tp5)整合gulp到项目实现静态资源的压缩的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

thinkphp5(tp5)整合gulp到项目实现静态资源的压缩