gulp自動化任務指令碼在HybridApp開發中的使用

標籤：des   style   class   code   java   http   

      目前做前端開發的同學可能都熟悉grunt，fis之類的自動化構建工具，其實在HybridApp開發中我們也可以使用這些工具來簡化我們的工作，gulp就是一個比grunt，fis都先進的構建工具，用好gulp可以簡化我們的工作流程，提升產品品質。本文會詳細的說明我們移動App項目gulp的使用經驗，部分關於gulp的介紹來自國外網站。

       gulp是 Fractal公司發布的一個新的基於nodejs的構建系統,目標是取代Grunt，成為最流行的JavaScript任務運行器。目前ionic架構預設的構建工具就是gulp，ionic使用gulp-sass外掛程式編譯css。

       根據gulp的文檔，它努力實現的主要特性是：

• 便於使用：採用代碼優於配置策略，gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。
• 高效：通過利用node.js強大的流，不需要往磁碟寫中間檔案，可以更快地完成構建。
• 高品質：gulp嚴格的外掛程式指導方針，確保外掛程式簡單並且按你期望的方式工作。
• 易於學習：通過把API降到最少，你能在很短的時間內學會gulp。構建工作就像你設想的一樣：是一系列流管道。

       Gulp通過流和代碼優於配置策略來盡量簡化任務編寫的工作。這看起來有點“像jQuery”的方法，把動作串起來建立構建任務。早在UNIX的初期，流就已經存在了。流在Node.js生態系統中也扮演了重要的角色，因此用gulp編寫任務也可看作是用Node.js編寫任務。當使用流時，gulp去除了中間檔案，只將最後的輸出寫入磁碟，整個過程因此變得更快。gulp採用代碼優於配置的策略，讓簡單的事情繼續簡單，將複雜的任務變得可管理。

      與其他任務運行器一樣，每個任務都可以是一個簡單的工作單元，下面的代碼是ionic架構內建的編譯scss為css：

gulp.task('sass', function(done) {gulp.src('./scss/ionic.app.scss').pipe(sass()).pipe(gulp.dest('./www/css/')).pipe(minifyCss({keepSpecialComments: 0})).pipe(rename({ extname: '.min.css' })).pipe(gulp.dest('./www/css/')).on('end', done);});gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);});

      關於Grunt，對它的抱怨除了過於冗長，還包括大量的外掛程式做了他們不該做的工作。Mark Goodyear在一篇部落格中舉了個例子，Grunt的imagemin外掛程式不僅壓縮圖片，同時還包括緩衝功能。他表示，在gulp中，緩衝是另一個外掛程式，可以被別的外掛程式使用，這樣就促進了外掛程式的可重用性。

      查看gulp的程式碼程式庫活動以及加星關注的人數，可以發現這個構建系統已經開始獲得動力。它同時也引起了JavaScript社區的興趣：Yeoman的首席開發人員Addy Osmani，提交了一篇issue，向團隊成員介紹gulp並評估其替換當前構建系統。Sindre Sorhus是Yeoman研發團隊成員和NPM的主要貢獻者，寫了一篇關於gulp的部落格並在Twitter上提到gulp：“比Grunt速度更快、配置更少”。

      我們項目使用gulp指令碼進行app發布前的預先處理工作，包括css壓縮，angularJS壓縮前預先處理， js去掉log，js壓縮，不需要打包的檔案刪除，檔案內容替換等事情，用的外掛程式主要有gulp-util，bower,gulp-concat,gulp-sass,gulp-minify-css,gulp-raname,shelljs,gulp-ngmin,gulp-uglify,gulp-rimraf,gulp-replace 等。

項目發布前只要在項目目錄下運行ionic build ios, gulp publish就可以了，然後在xcode裡面打包發布。

      到xcode裡面運行 Project -> Archive, 在彈出的Organizer視窗選中剛產生的Archive，點擊Distribute， 選中第二項發布企業分發版本，（然後可以選擇填寫一些資訊產生plist檔案，不必須，這個檔案就是個文字檔，可以直接編輯的）。

 

附gulp項目設定檔gulpfile.js的代碼

var gulp = require('gulp');var gutil = require('gulp-util');var bower = require('bower');var concat = require('gulp-concat');var sass = require('gulp-sass');var minifyCss = require('gulp-minify-css');var rename = require('gulp-rename');var sh = require('shelljs');var paths = {sass: ['./scss/**/*.scss']};gulp.task('default', ['sass']);gulp.task('sass', function(done) {gulp.src('./scss/ionic.app.scss').pipe(sass()).pipe(gulp.dest('./www/css/')).pipe(minifyCss({keepSpecialComments: 0})).pipe(rename({ extname: '.min.css' })).pipe(gulp.dest('./www/css/')).on('end', done);});gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);});gulp.task('install', ['git-check'], function() {return bower.commands.install().on('log', function(data) {gutil.log('bower', gutil.colors.cyan(data.id), data.message);});});gulp.task('git-check', function(done) {if (!sh.which('git')) {console.log(' ' + gutil.colors.red('Git is not installed.'),'\n Git, the version control system, is required to download Ionic.','\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.','\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.');process.exit(1);}done();});//prvar ngmin = require('gulp-ngmin');gulp.task('ngmin', function () {return gulp.src('./www/js/*.js').pipe(ngmin({dynamic: false})).pipe(gulp.dest('dist'));});var stripDebug = require('gulp-strip-debug');var uglify = require('gulp-uglify');gulp.task('compress', function() {gulp.src('./www/js/**/*.js').pipe(stripDebug()).pipe(uglify({outSourceMap: false})).pipe(gulp.dest('./platforms/ios/www/js/'))});var rimraf = require('rimraf'); // rimraf directlygulp.task('delete', function (cb) {rimraf('./platforms/ios/www/mock', cb);rimraf('./platforms/ios/www/templates/statics', cb);// rimraf('./platforms/ios/www/lib', cb);// rimraf('./platforms/ios/www/lib/ionic/js/ionic.bundle.js', cb);});var grimraf = require('gulp-rimraf');gulp.task('del', function() {gulp.src('./platforms/ios/www/mock', { read: false }) // much faster// .pipe(ignore('node_modules/**')).pipe(grimraf());gulp.src('./platforms/ios/www/templates/statics', { read: false }) // much faster.pipe(grimraf());gulp.src('./platforms/ios/www/res', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/css/ionic.app.css', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/angular', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/angular-animate', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/angular-sanitize', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/angular-ui-router', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/angular-ui-router', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/scss', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/css', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/js/ionic-angular.js', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/js/ionic-angular.min.js', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/js/ionic.js', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/js/ionic.min.js', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/js/ionic.bundle.js', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/css', { read: false }).pipe(grimraf());gulp.src('./platforms/ios/www/lib/ionic/README.md', { read: false }).pipe(grimraf());});var replace = require('gulp-replace');gulp.task('rep', function(){gulp.src('./www/index.html').pipe(replace( "ionic.bundle.js" , "ionic.bundle.min.js")).pipe(replace( "ionic.app.css", "ionic.app.min.css")).pipe(gulp.dest('./platforms/ios/www/'));});gulp.task('publish', ['sass','compress','del','rep']);