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