Gulp是近年来很火的一款前端自动化构建工具，本人之前做的项目采用的是Grunt，感觉其配置较为繁琐，不是特别友好，故尝试用Gulp来构建一个Angular项目。

在实践之前我们先了解一下对比Grunt，Gulp有哪些优点：

• 易用：Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
• 高效：Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过Pipe连接，全程只需一次I/O，不会产生临时文件，配置简单，速度快于Grunt。
• 易学 ：Gulp的核心API只有5个（task,src,dest,watch,run），简洁易懂，容易掌握。

现在我们开始Gulp构建之旅吧，首先我们需要建立一个Angular项目，我选择使用Angular Seed，即Angular种子项目，可以从github上面下载， 点击打开Angular Seed链接。

然后我们对其进行一些简单的修改，去掉一些不必要的文件，增加了一个简单的sass文件（测试gulp的编译sass功能），项目结构如下图：

下一步我们使用npm 安装gulp：1 . npm install -g gulp (全局安装)  2. npm install --save-dev gulp (项目目录安装）  两者都是必须的。

然后我们在项目根目录下创建gulp配置文件gulpfile.js，配置文件是自动化构建的核心，在配置文件的头部定义需要使用到的gulp组件：

// 引入 gulp
var gulp = require('gulp'); // 引入组件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCss = require("gulp-minify-css");
var sass = require("gulp-sass");
var htmlmin = require('gulp-html-minifier');
var htmlreplace = require('gulp-html-replace');
var templateCache = require('gulp-angular-templatecache');
var clean = require('gulp-clean');

下面重点介绍各个组件的作用及使用方法：

1. jshint   

Jshint是一款JS静态检查工具，能检出代码编写中的非逻辑错误，gulp中配置如下：

gulp.task('lint', function() {gulp.src('app/**/*.js').pipe(jshint()).pipe(jshint.reporter('default'));
});

gulp.task用于定义gulp任务，gulp.src表示源文件输入，pipe()可以将上一层输出作为下一层的输入，结构简洁清晰，集成jshint后再打包后可以在命令行看到代码相关错误信息。

2. html模板缓存

通常在Angular项目中会有很多子页面，通过路由进行切换，这样会造成频繁的http请求，所以Angular提供了模板缓存技术。还有一点就是如果将View1

和View2文件夹直接打包到dist中会显得太过臃肿，所以我找到了一个gulp插件gulp-angular-templatecache解决了这个问题，该插件可以将

所有html模板放到缓存中并打包成templates.js文件，这样在切换页面时从缓存中直接读取html，而不会通过http请求，配置如下：

gulp.task('cacheHtml', function() {gulp.src('app/view*/*.html')     //需要缓存的子页面.pipe(templateCache({module: 'myApp'}))  //配置模块名称，此处应为angular主模块.pipe(gulp.dest('dist/'))
});

3. 压缩、合并JS文件

gulp使用gulp-uglify来压缩JS，使用gulp-concat合并JS文件，配置如下：

// 压缩，合并js文件
gulp.task('scripts',['cacheHtml'], function() {gulp.src(['bower_components/angular/angular.js','bower_components/angular-loader/angular-loader.js','bower_components/angular-route/angular-route.js','app/**/*.js','dist/templates.js']).pipe(concat('all.js')).pipe(uglify()).pipe(gulp.dest('dist/js'));
});

在源文件中我加上了上一步中打包好的templates.js文件，但此处要注意的是：gulp中的任务默认异步执行，有可能该任务运行时templates.js并不存在，好在gulp提供了对于task执行顺序的支持，我们将‘cacheHtml’添加道中括号中确保压缩JS任务会在cache任务完成之后进行。

4. 编译sass以及压缩css

使用gulp-sass和gulp-minify-css 来编译sass和压缩css文件，较为简单，配置如下：

gulp.task('compileSass', function () {gulp.src('app/style.scss')                   //要编译的sass文件.pipe(sass().on('error', sass.logError)).pipe(gulp.dest('dist/css'));
});gulp.task('minifyCss',['compileSass'], function () {gulp.src(['dist/css/style.css','app/app.css']) // 要压缩的css文件.pipe(concat('all.css')).pipe(minifyCss()) //压缩css.pipe(gulp.dest('dist/css'));
});

5. html中js,css替换

此时我们的js和css打包任务均已完成，但是项目中的index.html依然引用的是一堆杂七杂八的js和css，如何将其内容替换为打包好的单独JS和CSS文件呢？gulp-html-replace组件可以 轻松实现。

  <!-- build:css --><link rel="stylesheet" href="app.css"><!-- endbuild --><!-- build:js --><script src="../bower_components/angular/angular.js"></script><script src="../bower_components/angular-route/angular-route.js"></script><script src="app.js"></script><script src="view1/view1.js"></script><script src="view2/view2.js"></script><script src="components/version/version.js"></script><script src="components/version/version-directive.js"></script><script src="components/version/interpolate-filter.js"></script><!-- endbuild -->

首先在js和css引用前后加上特定注释，然后在gulpfile中进行如下配置：

gulp.task('html-replace', function() {gulp.src('app/index.html').pipe(htmlreplace({'css': 'css/all.css','js': 'js/all.js'})).pipe(gulp.dest('dist/'));
});

该任务会将index.html中的诸多js,css引用替换为对应的压缩js和css，非常方便。

6. 执行任务

在执行任务之前需要定义一个clean任务来清空dist，比较简单，不在赘述，然后将之前定义好的任务放到default任务中运行。

gulp.task('clean', function () {gulp.src('dist/*').pipe(clean({force: true})).pipe(gulp.dest('dist'));
});// 默认任务
gulp.task('default',['clean'], function(){gulp.run('lint',  'scripts','minifyCss','html-replace');
});

最后打开命令行窗口，进入项目目录，执行gulp命令，结果如图：

可以看到有两个error，这是由于Angular种子项目将“use strict” 语句用在了js文件头中，jshint认为这样不规范，打包时容易造成混淆，建议放入function中，不过这个对我们构建项目没有任何影响啦。
至此，一个angular项目自动化构建成功，完美

总结

前端技术日新月异，各种框架层出不穷。作为刚入职场的新人，在夯实基础的同时保持对新技术的渴望是通向成功的必经之路，我始终相信一颗年轻的心，无惧风雨，无惧挑战。