Gulp使用指南 | 程序师使用gulp和cordova hook发布ionic程序-js教程-网页制作-壹聚教程网使用gulp和cordova hook发布ionic程序
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目,下面来看看使用gulp和cordova hook发布ionic程序教程。
发布ioinc程序主要通过gulp任务和cordova hook方式进行，前者是目前前端最流行的构建工具，后者在cordova（ionic框架底层的实现）构建过程中插入自定义的任务，从而通过对构建过程的干预达到最终发布的目的。通常来说，正式发布ionic程序需要做以下工作：
对js代码进行语法检验（Lint）（cordova hook），保证js代码的正确性，才能在后面进行正确的混淆处理
把html模板文件转换为angular模板（gulp任务），从而加快程序的运行速度
开启agular的严格注入模式（gulp任务），相当于对angular进行lint检验，这一点也是为了保证后面正确的混淆处理
合并css和js文件并替换html中的引用（gulp任务），将代码中的css和js文件进行合并
压缩和混淆代码（cordova hook），因为ionic基于Cordova框架，因此这里使用cordova hook的方式进行，也可以使用gulp任务具体来写
下面分别进行详细的描述：
1. 对js代码进行语法检验（Lint）（cordova hook）
首先在项目根目录下执行下面的命令安装jshint
&npm install jshint --save-dev
npm install async --save-dev
然后在工程目录下面创建hooks目录，这里里面是存放cordova hook的文件，然后创建before_prepare目录并将这里的文件放入其中，主要有一个02_jshint.js文件。
2. 把html模板文件转换为angular模板（gulp任务）
首先在项目根目录下执行下面的命令安装gulp-angular-templatecache
&npm install gulp-angular-templatecache --save-dev
接下来打开gulpfile.js，增加下面的代码：
&var templateCache = require('gulp-angular-templatecache');
&// 在paths下面增加对tempate目录的设置
&var paths = {
&& sass: ['./scss/**/*.scss'],
&& templatecache: ['./www/templates/**/*.html']
&gulp.task('templatecache', function (done) {
&& gulp.src(paths.templatecache)
&&&& .pipe(templateCache({standalone:true, root: 'templates'}))
&&&& .pipe(gulp.dest('./www/js'))&&& // 将处理好的js文件放在www/js下面，方便后面的合并
&&&& .on('end', done);
在app.js中增加对上面自动生成的templates模块的引用：
&angular.module('app', ['ionic', 'controllers', 'templates'])
在index.html中引入对templates.js文件的引用
&&script src=&js/templates.js&&&/script&
3. 开启agular的严格注入模式（gulp任务）
首先在项目根目录下执行下面的命令安装gulp-ng-annotate
&npm install gulp-ng-annotate --save-dev
然后编写gulpfile.js文件，增加ng_annotate任务：
&var ngAnnotate = require('gulp-ng-annotate');
&// 在paths下面增加ng_annotate的目录
&var paths = {
&& sass: ['./scss/**/*.scss'],
&& templatecache: ['./www/templates/**/*.html'],
&& ng_annotate: ['./www/js/*.js']
&// angular注入验证
&gulp.task('ng_annotate', function(done) {
&& gulp.src(paths.ng_annotate)
&&&& .pipe(ngAnnotate({single_quotes: true}))
&&&& .pipe(gulp.dest('./www/dist/dist_js/app'))
&&&& .on('end', done);
上面的ng_annotate任务会自动将js中的angular用的引用加上，比如原始代码为
&angular.module('app.controllers', []).controller('LoginCtrl', function($scope) {});
经过上面的插件会自动处理成
&angular.module('app.controllers', []).controller('LoginCtrl', '$scope', function($scope) {});
并将新的文件放在www/dist/dist_js/app目录下，因此接下来需要在index.html文件中修改对原来js的引用并在body标签中添加上ng-strict-di属性：
&&script src=&dist/dist_js/app/app.js&&&/script&
&&body ng-app=&app& ng-strict-di&
4. 合并css和js文件并替换html中的引用（gulp任务）
合并和替换css、js文件需要使用gulp-useref模块，在项目根目录下执行下面命令进行安装：
&npm install gulp-useref --save-dev
然后编写gulpfile.js文件增加useref任务：
&var useref = require('gulp-useref');
&// 在paths下面增加ng_annotate的目录
&var paths = {
&& sass: ['./scss/**/*.scss'],
&& templatecache: ['./www/templates/**/*.html'],
&& ng_annotate: ['./www/js/*.js'],
&& useref: ['./www/*.html']
&// useref任务
&gulp.task('useref', function (done) {
&& var assets = useref.assets();
&& gulp.src(paths.useref)
&&&& .pipe(assets)
&&&& .pipe(assets.restore())
&&&& .pipe(useref())
&&&& .pipe(gulp.dest('./www/dist'))
&&&& .on('end', done);
useref使用特殊的注释标签对标签内的css或js文件进行合并，因此修改index.html文件
&&!-- build:css dist_css/styles.css --&
&&&& &link href=&css/style.css& rel=&stylesheet&&
&&&& &!-- endbuild --&
&&&& &!-- build:js dist_js/app.js --&
&&&& &script src=&dist/dist_js/app/app.js&&&/script&
&&&& &script src=&dist/dist_js/app/controllers.js&&&/script&
&&&& &script src=&dist/dist_js/app/routes.js&&&/script&
&&&& &script src=&dist/dist_js/app/services.js&&&/script&
&&&& &script src=&dist/dist_js/app/directives.js&&&/script&
&&&& &script src=&dist/dist_js/app/templates.js&&&/script&
&&&& &!-- endbuild --&
对于不需要合并的资源文件可以不加build:xx注释。
5. 压缩和混淆代码（cordova hook）
最后使用cordova hook的方式压缩和混淆代码，需要用到cordova-uglify和mv模块，在项目根目录下执行下面的命令进行安装：
&npm install cordova-uglify --save-dev
npm instal mv --save-dev
npm instal uglify-js --save-dev
npm instal clean-css --save-dev
npm instal ng-annotate --save-dev
然后将这个里面的js下来放到hooks/after_prepare目录下，在安装cordova-uglify的时候，会自动在hooks/after_prepare目录下创建一个uglify.js文件，因为上面的文件中已经有了060_uglify.js，因此将uglify.js文件删除即可。
经过上面的设置之后，就对整个的发布流程进行了修改和处理，最后还需要做一些后续的工作。首先将上面的gulp任务加入到default和watch任务中，修改gulpfile.js如下：
&gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']);
&gulp.task('watch', function() {
&& gulp.watch(paths.sass, ['sass']);
&& gulp.watch(paths.templatecache, ['templatecache']);
&& gulp.watch(paths.ng_annotate, ['ng_annotate']);
&& gulp.watch(paths.ng_annotate, ['useref']);
然后还需要在ionic.project文件中加入gulpStartupTasks，让ionic项目启动的时候自动执行gulp任务：
& &name&: &hello&,
& &app_id&: &&,
& &gulpStartupTasks&: [
&&& &sass&,
&&& &templatecache&,
&&& &ng_annotate&,
&&& &useref&,
&&& &watch&
另外，如果是在linux或mac系统下，还需要使用chmod +x 命令启用hooks目录下面的所有js文件的执行权限。
最后执行正确的ionic命令就会自动执行上述的过程并进行发布，比如ioinc build browser。如果发现Errors in file www/js/xxx.js的提示，则说明代码不太严格，出现了错误，根据提示对代码进行修改，直到执行成功为止。另外，在开发的时候执行ioinc serve browser命令的时候，也会自动监控文件的变化并执行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 templateCache = require('gulp-angular-templatecache');
&var ngAnnotate = require('gulp-ng-annotate');
&var useref = require('gulp-useref');
&var paths = {
&& sass: ['./scss/**/*.scss'],
&& templatecache: ['./www/templates/**/*.html'],
&& ng_annotate: ['./www/js/*.js'],
&& useref: ['./www/*.html']
&gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']);
&gulp.task('sass', function(done) {
&& gulp.src('./scss/ionic.app.scss')
&&&& .pipe(sass())
&&&& .on('error', sass.logError)
&&&& .pipe(gulp.dest('./www/css/'))
&&&& .pipe(minifyCss({
&&&&&& keepSpecialComments: 0
&&&& .pipe(rename({ extname: '.min.css' }))
&&&& .pipe(gulp.dest('./www/css/'))
&&&& .on('end', done);
&// 将模板进行合并
&gulp.task('templatecache', function (done) {
&& gulp.src(paths.templatecache)
&&&& .pipe(templateCache({standalone:true, root: 'templates'}))
&&&& .pipe(gulp.dest('./www/js'))
&&&& .on('end', done);
&// angular注入验证
&gulp.task('ng_annotate', function(done) {
&& gulp.src(paths.ng_annotate)
&&&& .pipe(ngAnnotate({single_quotes: true}))
&&&& .pipe(gulp.dest('./www/dist/dist_js/app'))
&&&& .on('end', done);
&// 压缩合并css/js文件
&gulp.task('useref', function (done) {
&& gulp.src(paths.useref)
&&&& .pipe(useref())
&&&& .pipe(gulp.dest('./www/dist'))
&&&& .on('end', done);
&gulp.task('watch', function() {
&& gulp.watch(paths.sass, ['sass']);
&& gulp.watch(paths.templatecache, ['templatecache']);
&& gulp.watch(paths.ng_annotate, ['ng_annotate']);
&& gulp.watch(paths.useref, ['useref']);
&gulp.task('install', ['git-check'], function() {
&& mands.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('/downloads') + '.',
&&&&&& '\n& Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
&&&& process.exit(1);
&& done();
上一页： &&&&&下一页：相关内容<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&gulp的初阶使用方法你敢说你都知道？!
gulp的初阶使用方法你敢说你都知道？!
安装好gulp之后接下来就是使用了，此文主要介绍一些前端开发时常用的一些插件及其用法
安装本地服务器插件：cnpm install gulp-connect --save-dev
安装合并文件插件：cnpm install gulp-concat --save-dev
安装压缩js文件插件：cnpm install gulp-uglify --save-dev
安装重命名插件：cnpm install gulp-rename --save-dev
安装压缩css文件插件：cnpm install gulp-minify-css --save-dev
优化图像文件的尺寸，在不改变图像质量的情况下，最小化图像大小：
cnpm install gulp-imagemin --save-dev
在gulpfile.js的顶部引入
var gulp = require('gulp');//将gulp插件包含进来
var sass = require('gulp-sass'); //包含sass转换为css插件
var less = require('gulp-less'); //包含less转换为css插件
var connect = require('gulp-connect'); //包含服务器插件
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩js
var rename = require('gulp-rename');//重命名文件
var minifyCSS = require('gulp-minify-css');//压缩css
var imagemin = require('gulp-imagemin');//优化图片
1.复制文件到指定文件夹
//复制文件到指定文件夹
gulp.task('copy-index',function(){
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
2.复制图片到指定文件夹
gulp.task('images',function(){
return gulp.src('images/*.jpg')
//.pipe(imagemin()) //未成功
.pipe(gulp.dest('dist/images'));
//images/**/* images目录下的所有子目录和所有东西(包含东西最多)
//images/*/*
images目录下的东西和子目录下的东西
//images/*.{png,jpg} images目录下的所有以png和jpg为后缀名的图片
3.多个数据文件复制(后面的目录可以不存在，不存在的话会自动创建)，在前面加叹号是排除这个（类）文件
gulp.task('data',function(){
return gulp.src(['xml/*.xml','json/*.json','!json/secre-*.json']).pipe(gulp.dest('dist/data'));
4.创建依赖任务
gulp.task('build',['copy-index','images','data'],function(){
console.log('编译成功！');
5.创建监听任务
gulp.task('watch',function(){
//当文件发生变化时，自动执行相应的任务
gulp.watch('index.html',['copy-index']);
gulp.watch('images/**/*.{jpg,png}',['images']);
gulp.watch(['xml/*.xml','json/*.json','!json/secre-*.json'],['data']);
6.将sass文件编译成css
gulp.task('sass',function(){
return gulp.src('stylesheets/**/*.scss')
.pipe(sass())
//上面定义的名字 var sass
.pipe(gulp.dest('dist/css'));
7.将less文件编译成css
gulp.task('less',function(){
return gulp.src('stylesheets/**/*.less')
.pipe(less())
//上面定义的名字 var sass
.pipe(minifyCSS())
//最小化css，去掉了注释和多余的空格
.pipe(gulp.dest('dist/css'));
8.设置默认任务
//退出任务监听：Ctrl + C
//默认任务 gulp
gulp.task('default',['server','watch']);
9.合并js、压缩js、重命名压缩后的js
gulp.task('scripts',function(){
return gulp.src(['javascripts/jquery.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
//合并js文件
.pipe(gulp.dest('dist/js'))
.pipe(uglify()) //最小化一下合并后的文件
.pipe(rename('vendor.min.js')) //重命名压缩后的js文件
.pipe(gulp.dest('dist/js'));
10.设置一个本地服务器
gulp.task('server',function(){
connect.server({
root:'dist',
//服务器的根目录
livereload: true
//启用实时刷新的功能
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
每只菜鸟都有鹰的梦想！个人博客：
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2}