gulp结合Thinkphp配置

gulpfile.js文件

 /*!
  * gulp
  * $ 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
  */

 // Load plugins
 var gulp = require('gulp'), // 必须先引入gulp插件
     del = require('del'), // 文件删除
     sass = require('gulp-sass'), // sass 编译
     less = require('gulp-less'), // less 编译
     sourcemaps = require('gulp-sourcemaps'), //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]
     cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道
     uglify = require('gulp-uglify'), // js 压缩
     rename = require('gulp-rename'), // 重命名
     concat = require('gulp-concat'), // 合并文件
     copy   = require('gulp-contrib-copy'),//不编译的文件直接copy
     notify = require('gulp-notify'), // 相当于 console.log()
     filter = require('gulp-filter'), // 过滤筛选指定文件
     jshint = require('gulp-jshint'), // js 语法校验
     revMD5 = require('gulp-rev-append'), // 插入文件指纹（MD5）
     cssnano = require('gulp-cssnano'), // CSS 压缩
     imagemin = require('gulp-imagemin'), // 图片优化
     browserSync = require('browser-sync'), // 保存自动刷新
     connect = require('gulp-connect'), //热刷新(本地服务器)
     fileinclude = require('gulp-file-include'), // 可以 include html 文件
     autoprefixer = require('gulp-autoprefixer'), // 添加 CSS 浏览器前缀
     babel = require('gulp-babel'); // 添加 CSS 浏览器前缀
     plumber = require('gulp-plumber'), //gulp-plumber插件来忽略less编译错误
     GJSDuck = require('gulp-jsduck'),//js文档生成
     gjsduck = new GJSDuck(['--out', 'mydoc']),
     runSequence = require('run-sequence'),   //添加版本号
     rev = require('gulp-rev'),
     revCollector = require('gulp-rev-collector');
 //定义原代码的目录和编译压缩后的目录
 var src = 'src',//源代码目录
     dist = 'dist';//编译压缩后的目录
 //es6编译

 // sass
 gulp.task('sass', function () {
     return gulp.src(src+'/Public/sass/**/*.scss', {
             style: 'expanded'
         }) // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式
         .pipe(cached('sass')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）
         .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本
         .pipe(sass())
         .pipe(sourcemaps.init()) //资源地图创建
         .pipe(sourcemaps.write()) //资源地图写入
         .pipe(gulp.dest(dist+'/Public/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流）
         .pipe(rename({
             suffix: '.min'
         })) // 对管道里的文件流添加 .min 的重命名
         .pipe(cssnano()) // 压缩 CSS
         .pipe(gulp.dest(dist+'/Public/css')); // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
 });
 // less
 gulp.task('less', function () {
     return gulp.src(src+'Public/css/**/*.less', {
             style: 'expanded'
         }) // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道并设置输出格式
         .pipe(plumber()) //忽略less编译错误
         .pipe(cached('less')) // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）
         .pipe(autoprefixer('last 6 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本
         .pipe(less({
             plugins: autoprefixer('last 6 version')
         }))
         .pipe(sourcemaps.init()) //资源地图创建
         .pipe(sourcemaps.write()) //资源地图写入
         .pipe(gulp.dest(src+'/Public/css')) //输出未压缩的css文件
         .pipe(gulp.dest(dist+'/Public/css')) //输出未压缩的css文件
         .pipe(rename({
             suffix: '.min'
         })) // 对管道里的文件流添加 .min 的重命名
         .pipe(cssnano()) // 压缩 CSS目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本
         .pipe(gulp.dest(src+'Public/css')); // 输出到 dist/css 目录下（不影响此时管道里的文件流）
 });
 // css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本）
 gulp.task('css', function () {
     return gulp.src(src+'/Public/css/**/*.css')
         .pipe(cached('css'))
         // .pipe(gulp.dest(dist+'/Public/css')) // 把管道里的所有文件输出到 dist/css 目录
         .pipe(filter(['**/*', '!**/*.min.css'])) // 筛选出管道中的非 *.min.css 文件
         .pipe(autoprefixer({
             browsers: ['> 1%', 'last 4 versions', 'Chrome>=38', 'Android >= 4.0', 'Firefox ESR', 'Firefox >= 36','iOS 7'],
             cascade: false, //是否美化属性值 默认：true 像这样：
             //-webkit-transform: rotate(45deg);
             //        transform: rotate(45deg);
             remove: false //是否去掉不必要的前缀 默认：true
         }))
         .pipe(connect.reload()) //页面热刷新
         // .pipe(gulp.dest(dist+'/Public/css')) // 把处理过的 css 输出到 dist/css 目录
         .pipe(rename({
             suffix: '.min'
         }))
         .pipe(cssnano())
         .pipe(gulp.dest(dist+'/Public/css'))//输出压缩的css
 });

 // styleReload （结合 watch 任务，无刷新CSS注入）
 gulp.task('styleReload', ['less', 'css'], function () {
     return gulp.src([dist+'/Public/css/**/*.css'])
         .pipe(cached('style'))
         .pipe(browserSync.reload({
             stream: true
         })); // 使用无刷新 browserSync 注入 CSS
 });

 // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本）
 gulp.task('script', function () {
     return gulp.src([src+'/Public/js/**/*.js'])
         .pipe(cached('script'))
         .pipe(gulp.dest(dist+'/Public/js'))
         .pipe(filter(['**/*', '!**/*.min.js'])) // 筛选出管道中的非 *.min.js 文件
         // .pipe(jshint('.jshintrc')) // js的校验与合并，根据需要开启
         // .pipe(jshint.reporter('default'))
         // .pipe(concat('main.js'))
         .pipe(connect.reload()) //页面热刷新
         .pipe(babel({
             presets: ['es2015']
         })) //es6转码
         // .pipe(gulp.dest(dist+'/Public/js')) //输出js文件
         .pipe(rename({
             suffix: '.min'
         }))
         .pipe(uglify()) // 压缩js
         .pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件
 });

 // image
 gulp.task('image', function () {
     return gulp.src(src+'/Public/images/**/*.{jpg,jpeg,png,gif,ico}')
         .pipe(cached('image'))
         .pipe(imagemin({
             optimizationLevel: 3, //类型：Number  默认：3  取值范围：0-7（优化等级）
             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
             interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
             multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
         }))
         // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化
         .pipe(connect.reload()) //页面热刷新
         .pipe(gulp.dest(dist+'/Public/images'));
 });

 // html 编译 html 文件并复制字体
 gulp.task('html', function () {
     return gulp.src([src+'/View/**/*.html'])
         .pipe(fileinclude()) // include html
         .pipe(revMD5()) // 生成并插入 MD5
         .pipe(connect.reload()) //页面热刷新
         .pipe(gulp.dest(dist+'/View/'));/*输出html文件*/
 });
 // //img生成文件hash编码并生成 rev-manifest.json文件名对照映射
 gulp.task('revImg', function(){
     return gulp.src(src+'/Public/images/**/*.png')
         .pipe(rev())
         .pipe(gulp.dest(dist+'/Public/images'))
         .pipe(rev.manifest())
         .pipe(gulp.dest(dist+'/Public/images'));
 });

 // //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
 gulp.task('revCss', function(){
     return gulp.src(src+'/Public/css/**/*.css')
    .pipe(rev())
    .pipe(gulp.dest(dist+'/Public/css'))//引用的文件添加版本号
    .pipe(rev.manifest())
    .pipe(gulp.dest(dist+'/Public/css'));//输出json文件索引
    });

 // //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
 gulp.task('revJs', function(){
     return gulp.src([src+'/Public/js/**/*.js'])
     .pipe(rev())
     .pipe(gulp.dest(dist+'/Public/js'))//引用的文件添加版本号
     .pipe(rev.manifest())
     .pipe(gulp.dest(dist+'/Public/js'));
 });

  //Html更换css、js文件版本
  gulp.task('revHtml', function () {
     return gulp.src([dist+'/**/*.json', dist+'/View/**/*.html'])  /*WEB-INF/views是本地html文件的路径，可自行配置*/
    .pipe(revCollector())
    .pipe(gulp.dest(dist+'/View/'));  /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
   });
  //Html更换dev文件版本
 gulp.task('dev', function (done) {
     ////需要说明的是，用gulp.run也可以实现以上所有任务的执行，
     //只是gulp.run是最大限度的并行执行这些任务，
     //而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
     condition = false;
     runSequence(
     ['revImg'],
     ['revCss'],
     ['revJs'],
     ['revHtml'],
     done);
 });

 // clean 清空 生产 目录
 gulp.task('clean', function () {
     return del(dist+'/**/*');
 });

 // build，关连执行全部编译任务
 gulp.task('build', ['sass', 'less', 'css', 'script', 'image','html'], function () {
     gulp.start('html');
 });

 // copy 其他不编译的文件直接copy
 gulp.task('copy',  function () {
     return gulp.src(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|less|js|html|tpl)')
         .pipe(copy())
         .pipe(gulp.dest(dist+'/'));
 });

 // default 默认任务，依赖清空dist目录和生成api文档
 gulp.task('default', ['clean', 'doc'], function () {
     return gulp.start('build');
 });

 //doc生成javascript api文档
 gulp.task('doc', function () {
     return gulp.src(src+'/Public/js/**/*.js')
         .pipe(gjsduck.doc());
 });
 // watch 开启本地服务器并监听
 gulp.task('watch', ['sass', 'less', 'css', 'script', 'image','html','dev'], function () {
     browserSync.init({
         //静态服务器配置
         // server: {
         //     baseDir: 'src' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器,设置服务器的根目录
         //     //index:'blink/blink.html' // 指定默认打开的文件
         // },
         //代理服务器配置
         //port:8050,  // 指定访问服务器的端口号
         proxy: "tpgulp", // 设置本地服务器的地址
         // notify: false, // 刷新不弹出提示
     });
     // 监控 html 文件，有变动则执行 html 任务
     gulp.watch(src+'/View/**/*.html', ['html','dev']).on('change',browserSync.reload);
     // 监控 SASS 文件，有变动则执行CSS注入
     gulp.watch(src+'/Public/sass/**/*.scss', ['styleReload','dev']);
     // 监控 LESS 文件，有变动则执行CSS注入
     gulp.watch(src+'/Public/less/**/*.less', ['styleReload','dev']);
     // 监控 CSS 文件，有变动则执行CSS注入
     gulp.watch(src+'/Public/css/**/*.css', ['styleReload','dev']);
     // 监控 js 文件，有变动则执行 script doc任务
     gulp.watch(src+'/Public/js/**/*.js', ['script', 'doc','dev']);
     // 监控图片文件，有变动则执行 image 任务
     gulp.watch(src+'/Public/images/**/*', ['image','dev']);
     // 监听其他不编译的文件 有变化直接copy
     gulp.watch(src+'/Public/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']);
     // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面
     gulp.watch([src+'/Public/**/*', src+'/Public/css/**/*','dev']).on('change', browserSync.reload);
 });

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

修改文件为

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

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

index.php

<?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';

// 亲^_^ 后面不需要任何代码了 就是如此简单

由于后台操作页面不与前台视图页面一起，故不在入口文件内，配置相应的模板文件默认目录，在命名空间内配置

config.php

<?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-gulp