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

look_w

使用 gulp 自动化构建 Angular 项目示例项目介绍文中使用的例子是一个基于 Angular.js 实现的网页版 Todo App，在 Github 中下载。项目代码结构如下
清单 5. 项目目录结构

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

|--bower_components |--build |--node_modules |--static_pages |--js    |--controllers    |--services    |--app.js          // app 启动配置 |--style    |--main.css |--view    |--note.html |--gulpfile.js      // gulp 配置 |--bower.json           // bower 配置 |--package.json         // node module 配置 |--index.html           // app 启动文件

架构上使用如下 libs

• Angular：JavaScript 架构
• Bootstrap：样式控件库
• bower：管理项目依赖包
• npm：管理项目运行的依赖工具
• gulp：自动化构建工具

设计 build process因为项目中使用到的 source code 有 JavaScript,，CSS，HTML 以及依赖 bower 导入的依赖包，所以我们将构建分成以下几个 task：

• jshint：编译 JavaScript
• clean：清空 build 目录
• template：合并并打包所有 HTML 模板文件生成 template.js
• js：压缩、混淆 JavaScript，并生成 sourcemap
• deployCSS：合并压缩 CSS
• devIndex：组织 develop 时的 index.html
• deployIndex：组织 deploy 时的 index.html，区别于第 6 个 task，这个 index.html 中 link 的将是压缩过的 CSS 和 JavaScript

接下来，我们分条介绍上面的 task。
设定全局变量 paths，记录 source code 的路径清单 6. 项目 paths

1 2 3 4 5 6 7

var paths = { js: ['./js/app.js', 'js/**/*.js'], css: ['./style/**/*.css'], templates: './js/templates.js', buildjs: ['./build/**/*.js'], buildcss: ['./build/**/*.css'] };

task 1: jshint这个 task 主要用来编译 JavaScript 代码。依赖插件 glup-jshint，需要在配置之前将这个插件安装好，之后如下配置：
清单 7. jshint

1 2 3 4 5 6

var jshint = require('gulp-jshint'); gulp.task('jshint', function() { gulp.src(paths.js) .pipe(jshint()) .pipe(jshint.reporter('default')); });

task 2: clean我们可以看到项目目录中有个 build 文件夹，这个目录是用来存放所有 build 之后的 CSS/JS/HTML 文件。所以 clean 的任务是在每次 build 之前清理上一次 build 的 outputs，也就是清空 build 文件夹。依赖 del 模块：
清单 8. clean

1 2 3 4 5

var del = require('del'); gulp.task('clean', function() { // You can use multiple globbing patterns as you would with `gulp.src` return del(['./build', paths.templates]); });

task 3: template开发过程中一般按照功能模块将页面分成不同的 HTML 片段模板，每个片段对应一个相应 controller，客户端浏览器访问网页时会分别请求下载 HTML 文件。当业务逻辑较为复杂时，项目中将会存在很多的 HTML 小文件，此时下载的请求数目也会很大，影响 performance。我们的想法是使用插件 gulp-angular-templatecache，将这些 HTML 模版片段合并成一个文件。这个插件会将所有模板文件合并成一个 template.js, 并将其作为项目中的一个 module 而存在。
清单 9. template

1 2 3 4 5 6

var templateCache = require('gulp-angular-templatecache'); gulp.task('template', function () { return gulp.src('./view/**/*.html') .pipe(templateCache({module: 'myApp'})) .pipe(gulp.dest('./js')) });

task 4: jsJavaScript 的 build 分成两种情况：

• DEV 模式：在开发环境中，为了方便 debug，JavaScript 通常不做压缩和混淆；
• PROD 模式：上生产环境时，JavaScript 必须并合压缩、混淆并成一个文件，同时需要去除所有的 log 输出语句。

JavaScript 混淆使用了插件 gulp-uglify；合并压缩使用了插件 gulp-concat，以及 gulp-sourcemaps；
去除 log 语句使用了插件 gulp-strip-debug。
清单 10. gulp 任务 js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

gulp.task('js', function() { if (deployEnvironment == Environment.DEV) { // DEV return gulp.src(paths.js) .pipe(concat('all.js')) .pipe(gulp.dest('./build')); } else { // PROD return gulp.src(paths.js) .pipe(sourcemaps.init()) .pipe(stripDebug()) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('./build')); } });

task 5: css文中示例的样式表使用的是原生的 CSS 文件，所以使用 cssmin 完成了所有 CSS 文件的合并及压缩。
清单 11. gulp 任务 css

1 2 3 4 5 6 7

var cssmin = require('gulp-cssmin'); gulp.task('deployCSS', function() { return gulp.src(paths.css) .pipe(cssmin()) .pipe(concat('all.css')) .pipe(gulp.dest('./build')); });