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

先看看我的目录结构:


第一步:打开Thinkphp5根目录下的 thinkphp\start 引导文件 添加以下代码:
// 定义资源和模板使用目录// 定义资源和模板使用目录
if($_SERVER['HTTP_HOST'] == 'www.ziyuanniao.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就介绍完了。
有任何错误和不合适的地方欢迎指出,大家一起共同进步!

有任何不明白的欢迎加东旭编程社区群 623918245 一起探讨 谢谢大家。
原文链接:http://www.ziyuanniao.com/post/86.html

想要获取更多关于thinkphp5或编程的资源和视频学习资料可以上东旭编程社区哦
东旭编程社区 http://www.zhudongxu.com

评论() 相关

收藏

赞

vogase

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。