【angularjs学习笔记】angularjs项目使用gulp自动化构建及压缩打包
目标
- 一键安装项目所有的依赖模块
- 一键安装项目所有的依赖库
- 代码检查确保严格语法正确
- 能将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 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'))
});- 将所有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'));
});- 将所有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'));
}
});- 根据现有文件想index中引入
npm install gulp-inject --save-devindex.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 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的依赖注入无法识别，所以代码编写的过程中要使用严格依赖的写法。如
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');
}]);