THINKPHP5 (TP5) consolidates gulp to projects for static resource compression

I wonder if everyone will ever encounter the trouble of manually unchecking config.php and database.php each time the code is submitted. (config.php file line offline on turn off debug mode and show off error database.php the configuration of the database on the offline line)
Anyway I used to be each time the Git commit code is manually canceled by their checked state and then submitted (SVN can move them to ignore the file location, but git even ignore the changes will still bounce out to let you submit ...).
This is not a tedious, sometimes busy to submit code forget to cancel they submitted it is normal
But once submitted to the formal environment, the consequences are disastrous!
So no more gossip. By this THINKPHP5 integration gulp to the project to achieve the consolidation of static resources, compression, MD5 suffix together to write their own solution (Daniel has a better solution welcome to explore).

First look at my directory structure:
The first step

: Open the Thinkphp\start boot file in the THINKPHP5 root directory to add the following code:
Defining resource and Template usage catalogs

Define resources and templates using directory if ($_server[' http_host ' = = ' www.php.cn ') {        //control file call    define (' STATICS ', '/dist ');  Static file Call path    define (' Templ ', '. /dist/');  Template file Call path        //control need to display error message    define (' Is_debug ', false);  Whether debug    define (' Err_tpl ', Think_path. ' TPL '. Ds. ' Error.tpl ');  Error template        //Database configuration    define (' host_name ', ' xxx.xx.xx.x ');  Database address    define (' USERNAME ', ' xxx ');  User name    define (' PASSWORD ', ' xxxxx ');  Password    }else{        //control file call    define (' STATICS ', '/static/assets ');    Define (' Templ ', ' ... /template/');        Controls whether error messages need to be displayed    define (' Is_debug ', true);  Whether debug    define (' Err_tpl ', Think_path. ' TPL '. Ds. ' Think_exception.tpl ');  Error template        //Database configuration    define (' host_name ', ' 127.0.0.1 ');  Database address    define (' USERNAME ', ' xxx ');  User name    define (' PASSWORD ', ' xxx ');  Password

(Note: XXX is the data that needs to be modified according to its actual situation)

1. The config.php file under the index module is added or modified to the following code:

Config file return [     ' template ' = + [                 //template path         ' View_path ' + Templ,                 //define template Layout        ' layout_on '     = >  true,        ' layout_name '   = '  layout ',        ' layout_item '   = '  {__content__} '            ],];

2. Replace or add the following code in the total config.php file:

Apply debug mode    ' App_debug ' +              is_debug,    //View output string contents replace    ' view_replace_str '       = [        ' __ static__ ' = + STATICS,    ],    //Exception page template file    ' Exception_tmpl ' +         err_tpl,    //Display error message    ' Show_error_msg '         = Is_debug,

3. Then all resource references use __static__ instead of the resource path:
Example: __static__/js/jquery.min.js

These are some of the configurations for THINKPHP5
The following starts to integrate gulp into the THINKPHP5 project

The second step is to create the Package.json in the THINKPHP5 project root directory;

{  "name": "Zhuzong",  "version": "0.0.1", "  description": "Resource Bird",  "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 "  }}

The third step is to create the gulpfile.js in the THINKPHP5 project root directory;

Gulpfile.jsvar Gulp = require (' gulp '); Runsequence = require (' run-sequence '), clearnhtml = require (' gulp-cleanhtml '), Minifyinline = require (' gulp-minif    Y-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 '; Copy htmlgulp.task (' copyhtml ', function () {return gulp.src ('./bolg/template/**/*.html '). Pipe (Clearnhtml ()). PIPE (M    Inifyinline ()). Pipe (Gulp.dest (dir)); });//Copy Cssgulp.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 ');}); /Copy Font gulp.task (' Copyfont ', function () {return gulp.src ('./bolg/public/static/assets/fonts/* '). Pipe (Gulp.dest (DIR2 + '/fonts ')});//Copy Jsgulp.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 (R Ev.manifest ()). Pipe (Gulp.dest (dir+ '/manifest/js ');});        /Copy Picture 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 ') ));});/ /Replace the Gulp.task (' Rev ', function () {return gulp.src ([dir+ '/manifest/**/*.json ') with the MD5 file reference after the static resource (css,js,image) in HTML. dir+ '/**/*.html ')//Find JSON, and destination HTML file path. PIPE (Revcollector ({replacereved:true,})). Pipe (gu Lp.dest (dir)); }); Monitor files and automate tasks : Server Gulp.task (' Server ', function () {Browsersync.init ({proxy: ' http://www.blog.com ', Notify:false,        Refresh does not eject the hint});       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 ']);      });//Set Default task Task:defaultgulp.task (' Default ', function (done) {condition = false; Sequentially execute runsequence ([' Clear '], [' copyimg '], [' copyhtml '], [' Copycss '], [' Copyfont '], [' Copyjs ']  , [' rev '], [' Server '], done);      });//htmlgulp.task (' HTML ', function (done) {condition = false;  sequentially executes runsequence ([' copyhtml '], [' rev '], [' Bwrel '], done);      });//cssgulp.task (' CSS ', function (done) {condition = false; Sequentially executes the runsequence ([' Copycss '], [' rev '], [' BwreL '], done);      });//jsgulp.task (' JS ', function (done) {condition = false;  sequentially executes runsequence ([' Copyjs '], [' rev '], [' Bwrel '], done);      });//imggulp.task (' img ', function (done) {condition = false;  sequentially executes runsequence ([' copyimg '], [' rev '], [' Bwrel '], done);  });//reloadgulp.task (' Bwrel ', function () {Gulp.watch (dir+ '/**/*.html '). On ("Change", reload);     });//Clear the Development folder (Dist) gulp.task (' Clear ', function () {del (dir); Del (DIR2); });

Replace the SRC and dist variables in the gulpfile.js with the actual directory of their own projects;
Replace proxy with its own local custom domain name;

Fourth step: Command line run the following command (if node. js and Gulp are already installed):

# Install various packages CNPM install# run Gulpgulp

If not, the browser will automatically compile and open;

Here is the compressed file marked red is the path after the MD5 file reference replaced
So far THINKPHP5 Integrated Gulp is finished. There are any mistakes and inappropriate places to welcome the point, we together progress together!