首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

使用 gulp 自动化构建 Angular 项目-2

使用 gulp 自动化构建 Angular 项目-2

task 6: devIndex这个 task 主要是管理开发使用的 index.html 文件中对静态资源的引用。因为我们使用了 bower 来管理项目的依赖包,比如 jQuery 和 Angular,我们使用下面这种方式来导入项目:
清单 12. 引用静态资源
1
2
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>




可以看出,当我们需要引用的静态资源变得很多时,这个 list 也将会变得很长很不好管理。这时可以使用插件 gulp-inject。
1. 使用 bower 命令安装项目依赖包时添加--save-dev 参数,使配置写入 bower.json 文件。比如安装 angular 使用如下命令:
清单 13. 安装本地 angular 模块
1
$ bower install –-save-dev angular




安装成功以后 bower.json 文件的 dependencies 中会自动生成 angular 的依赖关系。
清单 14.bower.json
1
2
3
"dependencies": {
"angular": "^1.5.7"
},




2. 在 index.html 中使用 inject 标签管理需要插入依赖包的位置。整理 index.html 成如下格式:
清单 15. 为 gulp-inject 准备的 index.html 模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular UI Router</title>
<!-- bower:css -->
<!-- endinject -->

<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<a ui-sref="note">go note</a>
<div ui-view></div>
<!-- bower:js -->
<!-- endinject -->

<!-- inject:js -->
<!-- endinject -->
</body>
</html>




3. 配置 inject 的 task
清单 16.gulp 任务 inject
1
2
3
4
5
6
7
8
gulp.task('devIndex', ['clean', 'jshint'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.js, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.css, {read: false}), {relative: true}))
.pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});




4. 执行命令 gulp devIndex,我们可以得到注入以后的 index.html 如下:
清单 17.Inject 后生成的 index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular UI Router</title>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
<!-- endinject -->

<!-- inject:css -->
<link rel="stylesheet" href="style/main.css">
<!-- endinject -->
</head>
<body>
<a ui-sref="note">go note</a>
<div ui-view></div>

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<!-- endinject -->

<!-- inject:js -->
<script src="js/app.js"></script>
<script src="js/controllers/note.js"></script>
<script src="js/services/note.js"></script>
<!-- endinject -->
</body>
</html>




task 7: deployIndexdeployIndex 主要是用来组织部署到测试或者生产环境时需要的 index.html。和 devIndex 的区别在于页面中引用的是合并压缩混淆后的静态资源,也就是项目目录 build 中的文件。此处同样也是使用的 gulp-inject,我们直接看一下 task。
清单 18. gulp 任务 deployIndex
1
2
3
4
5
6
7
8
gulp.task('deployIndex', ['clean', 'jshint', 'template', 'deployJS', 'deployCSS'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true}))
.pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});




上面这段代码在配置 deployIndex 时使用了三个参数,其中第二个参数表示当前 task 所依赖的 task list。
调用 gulp deployIndex,生成的 index.html 和上一个 task 类似,不过 CSS 和 JS 的引用会修改如下:
清单 19. Inject 之后生成的 index.html
1
2
3
4
5
6
<!-- inject:css -->
<link rel="stylesheet" href="build/all.css">
<!-- endinject -->
<!-- inject:js -->
<script src="build/all.min.js"></script>
<!-- endinject -->




结束语随着"前后端分离"架构的日渐普及,前台的自动化构建将越来越被重视。本文着重介绍了 gulp 的使用方式,以及 Web 前台开发过程中涉及的一些自动化构建切入点,希望读者可以通过本文了解 Web 前台的自动化构建相关知识。
返回列表