免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
gulp自動(dòng)化任務(wù)腳本在HybridApp開(kāi)發(fā)中的使用

       目前做前端開(kāi)發(fā)的同學(xué)可能都熟悉grunt，fis之類的自動(dòng)化構(gòu)建工具，其實(shí)在HybridApp開(kāi)發(fā)中我們也可以使用這些工具來(lái)簡(jiǎn)化我們的工作，gulp就是一個(gè)比grunt，fis都先進(jìn)的構(gòu)建工具，用好gulp可以簡(jiǎn)化我們的工作流程，提升產(chǎn)品質(zhì)量。本文會(huì)詳細(xì)的說(shuō)明我們移動(dòng)App項(xiàng)目gulp的使用經(jīng)驗(yàn)，部分關(guān)于gulp的介紹來(lái)自國(guó)外網(wǎng)站。

       gulp是 Fractal公司發(fā)布的一個(gè)新的基于nodejs的構(gòu)建系統(tǒng),目標(biāo)是取代Grunt，成為最流行的JavaScript任務(wù)運(yùn)行器。目前ionic框架默認(rèn)的構(gòu)建工具就是gulp，ionic使用gulp-sass插件編譯css。

       根據(jù)gulp的文檔，它努力實(shí)現(xiàn)的主要特性是：

  • 易于使用：采用代碼優(yōu)于配置策略，gulp讓簡(jiǎn)單的事情繼續(xù)簡(jiǎn)單，復(fù)雜的任務(wù)變得可管理。
  • 高效：通過(guò)利用node.js強(qiáng)大的流，不需要往磁盤(pán)寫(xiě)中間文件，可以更快地完成構(gòu)建。
  • 高質(zhì)量：gulp嚴(yán)格的插件指導(dǎo)方針，確保插件簡(jiǎn)單并且按你期望的方式工作。
  • 易于學(xué)習(xí)：通過(guò)把API降到最少，你能在很短的時(shí)間內(nèi)學(xué)會(huì)gulp。構(gòu)建工作就像你設(shè)想的一樣：是一系列流管道。

       Gulp通過(guò)流和代碼優(yōu)于配置策略來(lái)盡量簡(jiǎn)化任務(wù)編寫(xiě)的工作。這看起來(lái)有點(diǎn)“像jQuery”的方法，把動(dòng)作串起來(lái)創(chuàng)建構(gòu)建任務(wù)。早在UNIX的初期，流就已經(jīng)存在了。流在Node.js生態(tài)系統(tǒng)中也扮演了重要的角色，因此用gulp編寫(xiě)任務(wù)也可看作是用Node.js編寫(xiě)任務(wù)。當(dāng)使用流時(shí)，gulp去除了中間文件，只將最后的輸出寫(xiě)入磁盤(pán)，整個(gè)過(guò)程因此變得更快。gulp采用代碼優(yōu)于配置的策略，讓簡(jiǎn)單的事情繼續(xù)簡(jiǎn)單，將復(fù)雜的任務(wù)變得可管理。

      與其他任務(wù)運(yùn)行器一樣，每個(gè)任務(wù)都可以是一個(gè)簡(jiǎn)單的工作單元，下面的代碼是ionic框架自帶的編譯scss為css：

[javascript] view plaincopy
  1. gulp.task('sass', function(done) {  
  2. gulp.src('./scss/ionic.app.scss')  
  3. .pipe(sass())  
  4. .pipe(gulp.dest('./www/css/'))  
  5. .pipe(minifyCss({  
  6. keepSpecialComments: 0  
  7. }))  
  8. .pipe(rename({ extname: '.min.css' }))  
  9. .pipe(gulp.dest('./www/css/'))  
  10. .on('end', done);  
  11. });  
  12.   
  13. gulp.task('watch', function() {  
  14. gulp.watch(paths.sass, ['sass']);  
  15. });  

      關(guān)于Grunt，對(duì)它的抱怨除了過(guò)于冗長(zhǎng)，還包括大量的插件做了他們不該做的工作。Mark Goodyear在一篇博客中舉了個(gè)例子，Grunt的imagemin插件不僅壓縮圖片，同時(shí)還包括緩存功能。他表示，在gulp中，緩存是另一個(gè)插件，可以被別的插件使用，這樣就促進(jìn)了插件的可重用性。

      查看gulp的代碼庫(kù)活動(dòng)以及加星關(guān)注的人數(shù)，可以發(fā)現(xiàn)這個(gè)構(gòu)建系統(tǒng)已經(jīng)開(kāi)始獲得動(dòng)力。它同時(shí)也引起了JavaScript社區(qū)的興趣：Yeoman的首席開(kāi)發(fā)者Addy Osmani，提交了一篇issue，向團(tuán)隊(duì)成員介紹gulp并評(píng)估其替換當(dāng)前構(gòu)建系統(tǒng)。Sindre Sorhus是Yeoman研發(fā)團(tuán)隊(duì)成員和NPM的主要貢獻(xiàn)者，寫(xiě)了一篇關(guān)于gulp的博客并在Twitter上提到gulp：“比Grunt速度更快、配置更少”。

      我們項(xiàng)目使用gulp腳本進(jìn)行app發(fā)布前的預(yù)處理工作，包括css壓縮，angularJS壓縮前預(yù)處理， js去掉log，js壓縮，不需要打包的文件刪除，文件內(nèi)容替換等事情，用的插件主要有g(shù)ulp-util，bower,gulp-concat,gulp-sass,gulp-minify-css,gulp-raname,shelljs,gulp-ngmin,gulp-uglify,gulp-rimraf,gulp-replace 等。

項(xiàng)目發(fā)布前只要在項(xiàng)目目錄下運(yùn)行ionic build ios, gulp publish就可以了，然后在xcode里面打包發(fā)布。

      到xcode里面運(yùn)行 Project -> Archive, 在彈出的Organizer窗口選中剛生成的Archive，點(diǎn)擊Distribute， 選中第二項(xiàng)發(fā)布企業(yè)分發(fā)版本，（然后可以選擇填寫(xiě)一些信息生成plist文件，不必須，這個(gè)文件就是個(gè)文本文件，可以直接編輯的）。

 

附gulp項(xiàng)目配置文件gulpfile.js的代碼

  1. var gulp = require('gulp');  
  2. var gutil = require('gulp-util');  
  3. var bower = require('bower');  
  4. var concat = require('gulp-concat');  
  5. var sass = require('gulp-sass');  
  6. var minifyCss = require('gulp-minify-css');  
  7. var rename = require('gulp-rename');  
  8. var sh = require('shelljs');  
  9.   
  10. var paths = {  
  11. sass: ['./scss/**/*.scss']  
  12. };  
  13.   
  14. gulp.task('default', ['sass']);  
  15.   
  16. gulp.task('sass', function(done) {  
  17. gulp.src('./scss/ionic.app.scss')  
  18. .pipe(sass())  
  19. .pipe(gulp.dest('./www/css/'))  
  20. .pipe(minifyCss({  
  21. keepSpecialComments: 0  
  22. }))  
  23. .pipe(rename({ extname: '.min.css' }))  
  24. .pipe(gulp.dest('./www/css/'))  
  25. .on('end', done);  
  26. });  
  27.   
  28. gulp.task('watch', function() {  
  29. gulp.watch(paths.sass, ['sass']);  
  30. });  
  31.   
  32. gulp.task('install', ['git-check'], function() {  
  33. return bower.commands.install()  
  34. .on('log', function(data) {  
  35. gutil.log('bower', gutil.colors.cyan(data.id), data.message);  
  36. });  
  37. });  
  38.   
  39. gulp.task('git-check', function(done) {  
  40. if (!sh.which('git')) {  
  41. console.log(  
  42. ' ' + gutil.colors.red('Git is not installed.'),  
  43. '\n Git, the version control system, is required to download Ionic.',  
  44. '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',  
  45. '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'  
  46. );  
  47. process.exit(1);  
  48. }  
  49. done();  
  50. });  
  51.   
  52. //pr  
  53. var ngmin = require('gulp-ngmin');  
  54.   
  55. gulp.task('ngmin', function () {  
  56. return gulp.src('./www/js/*.js')  
  57. .pipe(ngmin({dynamic: false}))  
  58. .pipe(gulp.dest('dist'));  
  59. });  
  60.   
  61. var stripDebug = require('gulp-strip-debug');  
  62.   
  63. var uglify = require('gulp-uglify');  
  64.   
  65. gulp.task('compress', function() {  
  66. gulp.src('./www/js/**/*.js')  
  67. .pipe(stripDebug())  
  68. .pipe(uglify({outSourceMap: false}))  
  69. .pipe(gulp.dest('./platforms/ios/www/js/'))  
  70. });  
  71.   
  72. var rimraf = require('rimraf'); // rimraf directly  
  73. gulp.task('delete', function (cb) {  
  74. rimraf('./platforms/ios/www/mock', cb);  
  75. rimraf('./platforms/ios/www/templates/statics', cb);  
  76. // rimraf('./platforms/ios/www/lib', cb);  
  77. // rimraf('./platforms/ios/www/lib/ionic/js/ionic.bundle.js', cb);  
  78.   
  79. });  
  80. var grimraf = require('gulp-rimraf');  
  81.   
  82. gulp.task('del', function() {  
  83. gulp.src('./platforms/ios/www/mock', { read: false }) // much faster  
  84. // .pipe(ignore('node_modules/**'))  
  85. .pipe(grimraf());  
  86.   
  87. gulp.src('./platforms/ios/www/templates/statics', { read: false }) // much faster  
  88. .pipe(grimraf());  
  89.   
  90. gulp.src('./platforms/ios/www/res', { read: false }).pipe(grimraf());  
  91. gulp.src('./platforms/ios/www/css/ionic.app.css', { read: false }).pipe(grimraf());  
  92.   
  93. gulp.src('./platforms/ios/www/lib/angular', { read: false }).pipe(grimraf());  
  94. gulp.src('./platforms/ios/www/lib/angular-animate', { read: false }).pipe(grimraf());  
  95. gulp.src('./platforms/ios/www/lib/angular-sanitize', { read: false }).pipe(grimraf());  
  96. gulp.src('./platforms/ios/www/lib/angular-ui-router', { read: false }).pipe(grimraf());  
  97. gulp.src('./platforms/ios/www/lib/angular-ui-router', { read: false }).pipe(grimraf());  
  98. gulp.src('./platforms/ios/www/lib/ionic/scss', { read: false }).pipe(grimraf());  
  99. gulp.src('./platforms/ios/www/lib/ionic/css', { read: false }).pipe(grimraf());  
  100. gulp.src('./platforms/ios/www/lib/ionic/js/ionic-angular.js', { read: false }).pipe(grimraf());  
  101. gulp.src('./platforms/ios/www/lib/ionic/js/ionic-angular.min.js', { read: false }).pipe(grimraf());  
  102. gulp.src('./platforms/ios/www/lib/ionic/js/ionic.js', { read: false }).pipe(grimraf());  
  103. gulp.src('./platforms/ios/www/lib/ionic/js/ionic.min.js', { read: false }).pipe(grimraf());  
  104. gulp.src('./platforms/ios/www/lib/ionic/js/ionic.bundle.js', { read: false }).pipe(grimraf());  
  105. gulp.src('./platforms/ios/www/lib/ionic/css', { read: false }).pipe(grimraf());  
  106. gulp.src('./platforms/ios/www/lib/ionic/README.md', { read: false }).pipe(grimraf());  
  107.   
  108.   
  109. });  
  110.   
  111. var replace = require('gulp-replace');  
  112.   
  113. gulp.task('rep', function(){  
  114. gulp.src('./www/index.html')  
  115. .pipe(replace( "ionic.bundle.js" , "ionic.bundle.min.js"))  
  116. .pipe(replace( "ionic.app.css", "ionic.app.min.css"))  
  117.   
  118. .pipe(gulp.dest('./platforms/ios/www/'));  
  119. });  
  120.   
  121.   
  122. gulp.task('publish', ['sass','compress','del','rep']);  



本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Cordova 3.x 基礎(chǔ)（10）
ionic實(shí)用功能(二)
Gulp解決發(fā)布線上文件(CSS和JS)緩存問(wèn)題
常用gulp插件介紹(一)
加速hexo
web前端開(kāi)發(fā)之版本控制（緩存處理）
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服