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

川长思鸟来 2022-08-24 00:55 145阅读 0赞

目前做前端开发的同学可能都熟悉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在[一篇博客][Link 1]中举了个例子，Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。

查看[gulp的代码库活动][gulp 1]以及[加星关注][Link 2]的人数，可以发现这个构建系统已经开始获得动力。它同时也引起了JavaScript社区的兴趣：Yeoman的首席开发者[Addy Osmani][]，提交了[一篇issue][issue]，向团队成员介绍gulp并评估其替换当前构建系统。[Sindre Sorhus][]是Yeoman研发团队成员和NPM的主要贡献者，写了一篇[关于gulp的博客][gulp 2]并在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的代码

[gulp]: http://gulpjs.com/
[Fractal]: http://www.wearefractal.com/
[Link 1]: http://markgoodyear.com/2014/01/getting-started-with-gulp/
[gulp 1]: https://github.com/gulpjs/gulp/network
[Link 2]: https://github.com/gulpjs/gulp/stargazers
[Addy Osmani]: https://twitter.com/addyosmani
[issue]: https://github.com/yeoman/yeoman/issues/1232
[Sindre Sorhus]: https://twitter.com/sindresorhus
[gulp 2]: http://robo.ghost.io/getting-started-with-gulp-2/