基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务：
压缩html、css和js
编译less或sass等
压缩图片
启动本地静态服务器
其他
目标
一键安装项目所有的依赖模块
一键安装项目所有的依赖库
代码检查确保严格语法正确
能将angularjs的html装换成js模块并且压缩到js文件中
将所有css文件合并压缩
将所有的js文件合并压缩
动态引入资源文件
拥有开发环境和生产环境两种打包方式
工具
npm基于node的包管理器
gulp基于node文件流的构建系统
bower是Web开发中的一个前端文件包管理器
实现过程
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 jshint var 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 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文件合并压缩
npm install gulp-cssmin --save-dev
//合并压缩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文件合并压缩
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 //去除打印
//测试生产两种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中引入
npm install gulp-inject --save-dev
index.html中标识写入的位置如：
<!doctype html> <html> <head> <meta charset="utf-8"> <title ng-bind="headTitle"></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <!-- bower:css --> <!-- endinject --> <!-- inject:css --> <link href="https://www.jb51.net/build/all.css" > <!-- endinject --> <!-- bower:js --> <!-- endinject --> <!-- inject:js --> <script src="https://www.jb51.net/build/all.min.js"></script> <!-- endinject --> </head> <body ng-app="starter"> <div ui-view></div> </body> </html>
开发环境
//dev资源引用命令--gulp devIndex 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('./')); });
生产环境
//生产环境资源引用命令--gulp deployIndex gulp.task('deployIndex', ['clean', 'jshint', 'template', 'js', '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('./')); });
注意点
代码混淆过会使angular的依赖注入无法识别，所以代码编写的过程中要使用严格依赖的写法。如