gulp結合Thinkphp配置
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
相關文章
- 1. gulp結合Thinkphp配置
- 2. gulp+ThinkPHP配置
- 3. gulp 配置
- 4. gulp配置
- 5. gulp+es6 配置
- 6. 配置gulp
- 7. thinkphp 配置
- 8. ThinkPHP配置PHPUnit
- 9. ThinkPHP 5.0 配置
- 10. gulp結合webpack開啓多頁面模式，配置以下
- 更多相關文章...
- • Eclipse Debug 配置 - Eclipse 教程
- • Maven 環境配置 - Maven教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. gulp結合Thinkphp配置
- 2. gulp+ThinkPHP配置
- 3. gulp 配置
- 4. gulp配置
- 5. gulp+es6 配置
- 6. 配置gulp
- 7. thinkphp 配置
- 8. ThinkPHP配置PHPUnit
- 9. ThinkPHP 5.0 配置
- 10. gulp結合webpack開啓多頁面模式，配置以下