gulp结合Thinkphp配置

时间 2020-05-10

原文原文链接

gulpfile.js文件javascript

 1 /*!  2  * gulp  3  * $ npm install gulp gulp-ruby-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev  4  */
 5 
 6 // Load plugins
 7 var gulp = require('gulp'), // 必须先引入gulp插件
 8     del = require('del'), // 文件删除
 9     sass = require('gulp-sass'), // sass 编译
 10     less = require('gulp-less'), // less 编译
 11     sourcemaps = require('gulp-sourcemaps'), //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]
 12     cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件经过管道
 13     uglify = require('gulp-uglify'), // js 压缩
 14     rename = require('gulp-rename'), // 重命名
 15     concat = require('gulp-concat'), // 合并文件
 16     copy   = require('gulp-contrib-copy'),//不编译的文件直接copy
 17     notify = require('gulp-notify'), // 至关于 console.log()
 18     filter = require('gulp-filter'), // 过滤筛选指定文件
 19     jshint = require('gulp-jshint'), // js 语法校验
 20     revMD5 = require('gulp-rev-append'), // 插入文件指纹（MD5）
 21     cssnano = require('gulp-cssnano'), // CSS 压缩
 22     imagemin = require('gulp-imagemin'), // 图片优化
 23     browserSync = require('browser-sync'), // 保存自动刷新
 24     connect = require('gulp-connect'), //热刷新(本地服务器)
 25     fileinclude = require('gulp-file-include'), // 能够 include html 文件
 26     autoprefixer = require('gulp-autoprefixer'), // 添加 CSS 浏览器前缀
 27     babel = require('gulp-babel'); // 添加 CSS 浏览器前缀
 28     plumber = require('gulp-plumber'), //gulp-plumber插件来忽略less编译错误
 29     GJSDuck = require('gulp-jsduck'),//js文档生成
 30     gjsduck = new GJSDuck(['--out', 'mydoc']),  31     runSequence = require('run-sequence'),   //添加版本号
 32     rev = require('gulp-rev'),  33     revCollector = require('gulp-rev-collector');  34 //定义原代码的目录和编译压缩后的目录
 35 var src = 'src',//源代码目录
 36     dist = 'dist';//编译压缩后的目录
 37 //es6编译
 38 
 39 // sass
 40 gulp.task('sass', function () {  41     return gulp.src(src+'/Public/sass/**/*.scss', {  42             style: 'expanded'
 43         }) // 传入 sass 目录及子目录下的全部 .scss 文件生成文件流经过管道并设置输出格式
 44         .pipe(cached('sass')) // 缓存传入文件，只让已修改的文件经过管道（第一次执行是所有经过，由于尚未记录缓存）
 45         .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本
 46  .pipe(sass())  47         .pipe(sourcemaps.init()) //资源地图建立
 48         .pipe(sourcemaps.write()) //资源地图写入
 49         .pipe(gulp.dest(dist+'/Public/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流）
 50  .pipe(rename({  51             suffix: '.min'
 52         })) // 对管道里的文件流添加 .min 的重命名
 53         .pipe(cssnano()) // 压缩 CSS
 54         .pipe(gulp.dest(dist+'/Public/css')); // 输出到 dist/css 目录下，此时每一个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
 55 });  56 // less
 57 gulp.task('less', function () {  58     return gulp.src(src+'Public/css/**/*.less', {  59             style: 'expanded'
 60         }) // 传入 sass 目录及子目录下的全部 .scss 文件生成文件流经过管道并设置输出格式
 61         .pipe(plumber()) //忽略less编译错误
 62         .pipe(cached('less')) // 缓存传入文件，只让已修改的文件经过管道（第一次执行是所有经过，由于尚未记录缓存）
 63         .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本
 64  .pipe(less({  65             plugins: autoprefixer('last 6 version')  66  }))  67         .pipe(sourcemaps.init()) //资源地图建立
 68         .pipe(sourcemaps.write()) //资源地图写入
 69         .pipe(gulp.dest(src+'/Public/css')) //输出未压缩的css文件
 70         .pipe(gulp.dest(dist+'/Public/css')) //输出未压缩的css文件
 71  .pipe(rename({  72             suffix: '.min'
 73         })) // 对管道里的文件流添加 .min 的重命名
 74         .pipe(cssnano()) // 压缩 CSS目录下，此时每一个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
 75         .pipe(gulp.dest(src+'Public/css')); // 输出到 dist/css 目录下（不影响此时管道里的文件流）
 76 });  77 // css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本）
 78 gulp.task('css', function () {  79     return gulp.src(src+'/Public/css/**/*.css')  80         .pipe(cached('css'))  81         // .pipe(gulp.dest(dist+'/Public/css')) // 把管道里的全部文件输出到 dist/css 目录
 82         .pipe(filter(['**/*', '!**/*.min.css'])) // 筛选出管道中的非 *.min.css 文件
 83  .pipe(autoprefixer({  84             browsers: ['> 1%', 'last 4 versions', 'Chrome>=38', 'Android >= 4.0', 'Firefox ESR', 'Firefox >= 36','iOS 7'],  85             cascade: false, //是否美化属性值 默认：true 像这样：
 86             //-webkit-transform: rotate(45deg);
 87             // transform: rotate(45deg);
 88             remove: false //是否去掉没必要要的前缀 默认：true
 89  }))  90         .pipe(connect.reload()) //页面热刷新
 91         // .pipe(gulp.dest(dist+'/Public/css')) // 把处理过的 css 输出到 dist/css 目录
 92  .pipe(rename({  93             suffix: '.min'
 94  }))  95  .pipe(cssnano())  96         .pipe(gulp.dest(dist+'/Public/css'))//输出压缩的css
 97 });  98 
 99 // styleReload （结合 watch 任务，无刷新CSS注入）
100 gulp.task('styleReload', ['less', 'css'], function () { 101     return gulp.src([dist+'/Public/css/**/*.css']) 102         .pipe(cached('style')) 103  .pipe(browserSync.reload({ 104             stream: true
105         })); // 使用无刷新 browserSync 注入 CSS
106 }); 107 
108 // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本）
109 gulp.task('script', function () { 110     return gulp.src([src+'/Public/js/**/*.js']) 111         .pipe(cached('script')) 112         .pipe(gulp.dest(dist+'/Public/js')) 113         .pipe(filter(['**/*', '!**/*.min.js'])) // 筛选出管道中的非 *.min.js 文件
114         // .pipe(jshint('.jshintrc')) // js的校验与合并，根据须要开启
115         // .pipe(jshint.reporter('default'))
116         // .pipe(concat('main.js'))
117         .pipe(connect.reload()) //页面热刷新
118  .pipe(babel({ 119             presets: ['es2015'] 120         })) //es6转码
121         // .pipe(gulp.dest(dist+'/Public/js')) //输出js文件
122  .pipe(rename({ 123             suffix: '.min'
124  })) 125         .pipe(uglify()) // 压缩js
126         .pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件
127 }); 128 
129 // image
130 gulp.task('image', function () { 131     return gulp.src(src+'/Public/images/**/*.{jpg,jpeg,png,gif,ico}') 132         .pipe(cached('image')) 133  .pipe(imagemin({ 134             optimizationLevel: 3, //类型：Number 默认：3 取值范围：0-7（优化等级）
135             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
136             interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
137             multipass: true, //类型：Boolean 默认：false 屡次优化svg直到彻底优化
138  })) 139         // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否屡次优化svg直到彻底优化
140         .pipe(connect.reload()) //页面热刷新
141         .pipe(gulp.dest(dist+'/Public/images')); 142 }); 143 
144 // html 编译 html 文件并复制字体
145 gulp.task('html', function () { 146     return gulp.src([src+'/View/**/*.html']) 147         .pipe(fileinclude()) // include html
148         .pipe(revMD5()) // 生成并插入 MD5
149         .pipe(connect.reload()) //页面热刷新
150         .pipe(gulp.dest(dist+'/View/'));/*输出html文件*/
151 }); 152 // //img生成文件hash编码并生成 rev-manifest.json文件名对照映射
153 gulp.task('revImg', function(){ 154     return gulp.src(src+'/Public/images/**/*.png') 155  .pipe(rev()) 156         .pipe(gulp.dest(dist+'/Public/images')) 157  .pipe(rev.manifest()) 158         .pipe(gulp.dest(dist+'/Public/images')); 159 }); 160 
161 // //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
162 gulp.task('revCss', function(){ 163     return gulp.src(src+'/Public/css/**/*.css') 164  .pipe(rev()) 165    .pipe(gulp.dest(dist+'/Public/css'))//引用的文件添加版本号
166  .pipe(rev.manifest()) 167    .pipe(gulp.dest(dist+'/Public/css'));//输出json文件索引
168  }); 169 
170 // //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
171 gulp.task('revJs', function(){ 172     return gulp.src([src+'/Public/js/**/*.js']) 173  .pipe(rev()) 174     .pipe(gulp.dest(dist+'/Public/js'))//引用的文件添加版本号
175  .pipe(rev.manifest()) 176     .pipe(gulp.dest(dist+'/Public/js')); 177 }); 178 
179  //Html更换css、js文件版本
180  gulp.task('revHtml', function () { 181     return gulp.src([dist+'/**/*.json', dist+'/View/**/*.html'])  /*WEB-INF/views是本地html文件的路径，可自行配置*/
182  .pipe(revCollector()) 183    .pipe(gulp.dest(dist+'/View/'));  /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
184  }); 185  //Html更换dev文件版本
186 gulp.task('dev', function (done) { 187     ////须要说明的是，用gulp.run也能够实现以上全部任务的执行，
188     //只是gulp.run是最大限度的并行执行这些任务，
189     //而在添加版本号时须要串行执行（顺序执行）这些任务，故使用了runSequence.
190     condition = false; 191  runSequence( 192     ['revImg'], 193     ['revCss'], 194     ['revJs'], 195     ['revHtml'], 196  done); 197 }); 198 
199 // clean 清空 生产 目录
200 gulp.task('clean', function () { 201     return del(dist+'/**/*'); 202 }); 203 
204 // build，关连执行所有编译任务
205 gulp.task('build', ['sass', 'less', 'css', 'script', 'image','html'], function () { 206     gulp.start('html'); 207 }); 208 
209 // copy 其余不编译的文件直接copy
210 gulp.task('copy',  function () { 211     return gulp.src(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|less|js|html|tpl)') 212  .pipe(copy()) 213         .pipe(gulp.dest(dist+'/')); 214 }); 215 
216 // default 默认任务，依赖清空dist目录和生成api文档
217 gulp.task('default', ['clean', 'doc'], function () { 218     return gulp.start('build'); 219 }); 220 
221 //doc生成javascript api文档
222 gulp.task('doc', function () { 223     return gulp.src(src+'/Public/js/**/*.js') 224  .pipe(gjsduck.doc()); 225 }); 226 // watch 开启本地服务器并监听
227 gulp.task('watch', ['sass', 'less', 'css', 'script', 'image','html','dev'], function () { 228  browserSync.init({ 229         //静态服务器配置
230         // server: {
231         // baseDir: 'src' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器,设置服务器的根目录
232         // //index:'blink/blink.html' // 指定默认打开的文件
233         // },
234         //代理服务器配置
235         //port:8050, // 指定访问服务器的端口号
236         proxy: "tpgulp", // 设置本地服务器的地址
237         // notify: false, // 刷新不弹出提示
238  }); 239     // 监控 html 文件，有变更则执行 html 任务
240     gulp.watch(src+'/View/**/*.html', ['html','dev']).on('change',browserSync.reload); 241     // 监控 SASS 文件，有变更则执行CSS注入
242     gulp.watch(src+'/Public/sass/**/*.scss', ['styleReload','dev']); 243     // 监控 LESS 文件，有变更则执行CSS注入
244     gulp.watch(src+'/Public/less/**/*.less', ['styleReload','dev']); 245     // 监控 CSS 文件，有变更则执行CSS注入
246     gulp.watch(src+'/Public/css/**/*.css', ['styleReload','dev']); 247     // 监控 js 文件，有变更则执行 script doc任务
248     gulp.watch(src+'/Public/js/**/*.js', ['script', 'doc','dev']); 249     // 监控图片文件，有变更则执行 image 任务
250     gulp.watch(src+'/Public/images/**/*', ['image','dev']); 251     // 监听其余不编译的文件 有变化直接copy
252     gulp.watch(src+'/Public/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']); 253     // 监控 dist 目录下除 css 目录之外的变更（如js，图片等），则自动刷新页面
254     gulp.watch([src+'/Public/**/*', src+'/Public/css/**/*','dev']).on('change', browserSync.reload); 255 });

将TP框架前端视图层单独提出php

修改文件为css

入口文件D:\item\TP-gulp\item\index.phphtml

命名空间下的配置文件D:\item\TP-gulp\item\Application\Home\Conf\config.php前端

index.phpjava

<?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK ] // +---------------------------------------------------------------------- // | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) // +---------------------------------------------------------------------- // | Author: liu21st <liu21st@gmail.com> // +---------------------------------------------------------------------- // 应用入口文件 // 检测PHP环境
if(version_compare(PHP_VERSION,'5.3.0','<'))  die('require PHP > 5.3.0 !'); // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false
define('APP_DEBUG',True); // 定义应用目录
define('APP_PATH','./Application/'); // 定义缓存目录
define('RUNTIME_PATH','./Runtime/'); // 定义模板文件默认目录(src开发视图目录，dist生产视图目录) // define("TMPL_PATH","./themes/src/"); // 定义资源文件默认目录(src开发视图目录，dist生产视图目录)
define("themes","./themes/dist"); // 引入ThinkPHP入口文件
require './ThinkPHP/ThinkPHP.php'; // 亲^_^ 后面不须要任何代码了 就是如此简单

因为后台操做页面不与前台视图页面一块儿，故不在入口文件内，配置相应的模板文件默认目录，在命名空间内配置git

config.phpes6

<?php return array( //'配置项'=>'配置值' // 'VIEW_PATH'=>'./themes/dist/View/',//单独定义视图目录（dist生产目录）
    'VIEW_PATH'=>'./themes/dist/View/',//单独定义视图目录(src开发目录) // 设置默认的模板主题'DEFAULT_THEME' => 'default' // 'DEFAULT_THEME' => 'src/View',//设置默认的模板主题
    'TMPL_PARSE_STRING'      => array(    // 定义经常使用路径
        '__PUBLIC__'         => __ROOT__.trim(themes,'.'),
        '__CSS__'         => __ROOT__ .trim(themes,'.'). '/Public/css',
        '__IMG__'         => __ROOT__.trim(themes,'.').'/Public/images',
        '__JS__'         => __ROOT__.trim(themes,'.').'/Public/js', ), );

address:https://gitee.com/webZT/TP-gulpweb