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.'),
'
 Git, the version control system, is required to download Ionic.',
'
 Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'
 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']);