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

gulp介绍

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

目标

工具

实现过程

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

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

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安装依赖模块采用命令

npm install xxx --save  //保存到dependencies（生产）npm install xxx --save-dev //保存到devDependencies（开发）

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

npm install //安装package中所有模块

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

2、语法检查

npm install gulp-jshint --save-dev

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

转换html为js模块

npm install gulp-angular-templatecache --save-dev

//合并html模板命令--gulp templatevar 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文件合并压缩

npm install gulp-cssmin --save-dev

//合并压缩css命令--gulp deployCSSvar 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文件合并压缩

npm install gulp-uglify --save-dev  //压缩npm install gulp-concat --save-dev  //合并npm install gulp-sourcemapsy --save-dev //处理 JavaScript 时生成 SourceMapnpm install gulp-strip-debug --save-dev //去除打印