目标
一键安装项目所有的依赖模块一键安装项目所有的依赖库代码检查确保严格语法正确能将angularjs的html装换成js模块并且压缩到js文件中将所有css文件合并压缩将所有的js文件合并压缩动态引入资源文件拥有开发环境和生产环境两种打包方式工具
npm基于node的包管理器gulp基于node文件流的构建系统 bower是Web开发中的一个前端文件包管理器实现过程
一键安装项目所有的依赖模块创建项目使用命令(项目目录下)
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类似
语法检查
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'))});
将所有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'));});
将所有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//去除打印
//测试生产两种js压缩命令--生产gulp js --prod测试gulp js --devgulp.task('js', function(type) {console.log(type);if (type == 'dev') { // devreturn gulp.src(paths.js).pipe(concat('all.js')).pipe(gulp.dest('./build'));} else { // prodreturn gulp.src(paths.js).pipe(sourcemaps.init()).pipe(stripDebug()).pipe(uglify()).pipe(concat('all.min.js')).pipe(sourcemaps.write()).pipe(gulp.dest('./build'));}});
根据现有文件想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 rel="stylesheet" href="build/all.css"><!-- endinject --><!-- bower:js --><!-- endinject --><!-- inject:js --><script src="build/all.min.js"></script><!-- endinject --></head><body ng-app="starter"><div ui-view></div></body></html>
开发环境
//dev资源引用命令--gulp devIndexgulp.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 deployIndexgulp.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的依赖注入无法识别，所以代码编写的过程中要使用严格依赖的写法。如
angularApp.config(['$routeProvider','$stateProvider','$urlRouterProvider',function($routeProvider,$stateProvider,$urlRouterProvider) {$stateProvider.state('sidebar', {url: '/sidebar',// abstract: true,templateUrl: 'templates/sidebar.html',controller: 'sidebarCtrl'})$urlRouterProvider.otherwise('/sidebar/tab1');}]);
![[万字详解 学习案例] 使用 gulp 去进行自动化构建一个项目](https://100zi.50zi.cn/uploadfile/img/14/921/83d95ba422c56359a4b49c62a3560e24.jpg)
