gulp结合Thinkphp配置
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: 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框架前端视图层单独提出
修改文件为
入口文件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
