php 压缩 合并代码,thinkphp5整合gulp到项目实现静态资源的合并、压缩、MD5后缀

不知道大家是否会遇到每次代码提交都手动取消选中config.php和database.php的烦恼。(config.php文件线下线上打开关闭调试模式和显示关闭错误 database.php线下线上数据库的配置)

反正我以前是每次git提交代码都手动的取消他们的选中状态再提交的 ( svn的话可以把他们移动到忽略文件的位置 但git就算忽略了 修改后还是会弹出来让你提交...)。

这样先不说繁琐不繁琐 有时候忙着提交代码忘记取消他们就提交了这很正常

但是一旦提交到正式环境那后果真是灾难性的！

所以闲话不多说了 借着这次thinkphp5整合gulp到项目实现静态资源的合并、压缩、MD5后缀 一起就把自己的解决方案写出来(大牛们有更好的解决方案欢迎探讨)。

先看看我的目录结构：

PHP视频教程_Mysql学习教程_jquery插件_Html模板_CSS3动画资源下载_资源鸟

第一步：打开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后的文件引用替换过的路径

PHP视频教程_Mysql学习教程_jquery插件_Html模板_CSS3动画资源下载_资源鸟

到此为止thinkphp5整合gulp就介绍完了。

有任何错误和不合适的地方欢迎指出，大家一起共同进步！

有任何不明白的欢迎加资源鸟群 623918245 一起探讨 谢谢大家。