Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

gulp介绍

基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务：

• 压缩html、css和js
• 编译less或sass等
• 压缩图片
• 启动本地静态服务器
• 其他

目标

• 一键安装项目所有的依赖模块
• 一键安装项目所有的依赖库
• 代码检查确保严格语法正确
• 能将angularjs的html装换成js模块并且压缩到js文件中
• 将所有css文件合并压缩
• 将所有的js文件合并压缩
• 动态引入资源文件
• 拥有开发环境和生产环境两种打包方式

工具

• npm基于node的包管理器
• gulp基于node文件流的构建系统
• bower是Web开发中的一个前端文件包管理器

实现过程

1、一键安装项目所有的依赖模块

创建项目使用命令(项目目录下)

rush:js;"> npm init //生成package.json { "name": "leason","version": "1.0.0","description": "test for angular and gulp and unit testing","main": "gulpfile.js","dependencies": { },"devDependencies": { },"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"repository": {

},"keywords": [
"leason"
],"author": "leason","license": "ISC","bugs": {
},}

npm安装依赖模块采用命令

rush:bash;"> npm install xxx --save //保存到dependencies（生产） npm install xxx --save-dev //保存到devDependencies（开发）

package.json中保存相应模块，项目重新部署只需要命令

rush:bash;"> npm install //安装package中所有模块

一键安装项目所有的依赖模块使用bower管理器，用法和npm类似

2、语法检查

rush:bash;"> npm install gulp-jshint --save-dev

rush:js;"> //代码语法检查命令--gulp jshint var jshint = require('gulp-jshint'); //代码检查 gulp.task('jshint',function () { return gulp.src(paths.js) .pipe(jshint()) .pipe(jshint.reporter('default')); });

转换html为js模块

rush:bash;"> npm install gulp-angular-templatecache --save-dev

rush:js;"> //合并html模板命令--gulp template var templateCache = require('gulp-angular-templatecache'); gulp.task('template',function () { return gulp.src(['./templates/**/*.html','./templates/*.html']) .pipe(templateCache({module: 'templates'})) .pipe(gulp.dest('./js')) });

3、将所有css文件合并压缩

rush:bash;"> npm install gulp-cssmin --save-dev

rush:js;"> //合并压缩css命令--gulp deployCSS var cssmin = require('gulp-cssmin'); gulp.task('deployCSS',function() { return gulp.src(paths.css) .pipe(cssmin()) .pipe(concat('all.css')) .pipe(gulp.dest('./build')); });

4、将所有js文件合并压缩

rush:bash;"> npm install gulp-uglify --save-dev //压缩 npm install gulp-concat --save-dev //合并 npm install gulp-sourcemapsy --save-dev //处理 JavaScript 时生成 SourceMap npm install gulp-strip-debug --save-dev //去除打印

rush:js;"> //测试生产两种js压缩命令--生产gulp js --prod测试gulp js --dev gulp.task('js',function(type) { console.log(type); if (type == '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')); } });

5、根据现有文件想index中引入

rush:bash;"> npm install gulp-inject --save-dev

index.html中标识写入的位置如：

rush:xhtml;"> <Meta charset="utf-8">