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']);

gulp自动化任务脚本在HybridApp开发中的使用

时间: 2024-11-03 21:08:07

gulp自动化任务脚本在HybridApp开发中的使用的相关文章

ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作.Grunt和Gulp都在Visual studio 2015中得到支持.ASP.NET 项目模板默认使用Gulp. Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp performance和优雅的语法受到欢迎.与Grunt不同,Grunt往往在硬盘上是

mysql自动化安装脚本开发

最近正好有空闲时间进行mysql自动安装脚本开发,预计先用shell实现一个版本,后续继续用python改造开发,最终实现python版本的开发. 2019-3-18,完成shell脚本的mysql自动化安装脚本的开发与调试.信息如下:mysql版本为5.6.43,通过shell函数的方式实现数据安装的3个阶段,再加上一个全局阶段,共4个阶段 1.全局阶段通过if [ $(id -u) != "0" ]判断当前操作用户是否为root,如不等0,则提示用户使用root用户执行该脚本,实现

FPGA开发中的脚本语言

多数FPGA开发者都习惯图形化界面(GUI).GUI方式简单易学,为小项目提供了一键式流程.然而,随着FPGA项目越来越复杂,在很多情况下GUI工具就阻碍了工作效率.因为GUI工具不能对整个开发过程提供足够的灵活性和控制.另一方,GUI工具本身会占用很大一部CPU资源和内存. 脚本语言的选择 在IC和FPGA的最常用的是TCL,Perl以及Shell.除此之外,还有可能用到其他的脚本语言.比如,Xilinx工具脚本语言还有Ruby和Python. TCL 顾名思义,Tool Command La

【COCOS2DX-LUA 脚本开发之一】在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇)并介绍脚本在游戏中详细用途!

[COCOS2DX-LUA 脚本开发之一]在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇)并介绍脚本在游戏中详细用途! 分类: [Cocos2dx Lua 脚本开发 ] 2012-04-16 10:08 30803人阅读 评论(18) 收藏 举报 游戏脚本luaanimationpython 本站文章均为李华明Himi原创,转载务必在明显处注明:转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2dx/681.htm

Gradle Android最新自动化编译脚本教程

转自:http://blog.csdn.net/changemyself/article/details/39927381 一.前言 Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具. 上面这句话我觉得写得很官方,大家只需知道Gradle可以用来android开发中进行多个项目依赖的自动化编译脚本,知道这点也就知道我们使用它的目的: 为什么不使用Ant做自动化编译脚本,因为ant上手快,但是维护起来太不方便了,有了Gradle你可

软件开发中的工作事务与微技能分级评估

工作三四年后,是否感觉自己开始做一些没有提升的事情?是否在做一些低水平重复建设的事情呢? 通过对软件开发中的工作事务与微技能进行评估和分级,可以清晰地理解自己的工作构成.评估自己的当前水平.定位下一步发展的方向和思路. 难度系数 *** 1 1.  完成初级的页面测试: 2.  编写简单非专业的文档: 3.  能够理解基本业务: 4.  日常普通的交流: 难度系数 *** 2 1.  完成一个简单的脚本实现临时需求, 15-20 min: 2.  完成一个函数或方法的单测, 5-15 min ;

【Unity游戏开发】浅谈Unity游戏开发中的单元测试

一.单元测试的定义与作用 单元测试定义:单元测试在传统软件开发中是非常重要的工具,它是指对软件中的最小可测试单元进行检查和验证,一般情况下就是对代码中的一个函数去进行验证,检查它的正确性.一个单元测试是一段自动化的代码,这段代码调用被测试的工作单元,之后对这个单元的单个最终结果的某些假设进行检验.单元测试使用单元测试框架编写,并要求单元测试可靠.可读并且可维护.只要产品代码不发生变化,单元测试的结果是稳定的.(百度的) 单元测试可以让你在软件开发的早期阶段发现 Bug,而不必到集成测试的时候才发

如何通过热修复,搞定开发中的那些 Bug?

作为程序员,Bug 修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是 Bug 修复中的 Hotfix,即热修复.接下来让我们跟随大牛的脚步来了解 Hotfix,就算你不能一下豁然开朗,相信也一定会有所启发.非常感谢赖春辉的整理,本文系国内 ITOM 管理平台 OneAPM 审校. 什么是热修复? 主持人-牛树民:我们自己的项目中还没有这方面的技术方案,最近一直在考虑这个.大家对热修复这个名词是怎么理解的?什么是热修复? 七里小晴天:是不是跟游戏打补丁差不多? longway:运行时,

Selenium2学习-017-WebUI自动化实战实例-015-获取浏览器中的 cookie 信息

日常我们在使用浏览器时,尤其是登录 WEB 应用时,我们的一些信息其实是保存在了浏览器的 cookie 信息中.我们可以通过浏览器自带的开发工具,进行查看相应的 cookie 信息,例如在火狐.chrome 中均可通过 F12 打开开发者工具打开.以下截图为在 chrome 中打开易迅网时的 cookie 信息: 若是小主您登录了相应的网页应用,cookie 中还会含有您的一些用户信息内容.那么这些 cookie 信息在我们日常 WebUI 自动化脚本的编写过程中有什么用途呢 ? 可以作为网页打