gulpfile.js文件

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: true105         })); // 使用无刷新 browserSync 注入 CSS106 });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()) // 压缩js126         .pipe(gulp.dest(dist+'/Public/js')) //输出压缩后的js文件127 });128 129 // image130 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 html148         .pipe(revMD5()) // 生成并插入 MD5149         .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 其他不编译的文件直接copy210 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     // 监听其他不编译的文件 有变化直接copy252     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框架前端视图层单独提出

修改文件为

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

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

index.php

     // +----------------------------------------------------------------------// 应用入口文件// 检测PHP环境if(version_compare(PHP_VERSION,'5.3.0','<'))  die('require PHP > 5.3.0 !');// 开启调试模式 建议开发阶段开启 部署阶段注释或者设为falsedefine('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

     '配置值'    // '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