gulp本身主動化任務腳本在HybridApp開發中的使用

      眼下作前端開發的同窗可能都熟悉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();
});

//pr
var 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 directly
gulp.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']);