目前做前端开发的同学可能都熟悉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']);
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。