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

2024-01-26 19:50:03 298

gulp介绍

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

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

目标

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

工具

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

实现过程

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

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

npminit
//生成package.json
{
"name":"leason",
"version":"1.0.0",
"description":"testforangularandgulpandunittesting",
"main":"gulpfile.js",
"dependencies":{
},
"devDependencies":{
},
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},
"repository":{

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

npm安装依赖模块采用命令

npminstallxxx--save//保存到dependencies（生产）
npminstallxxx--save-dev//保存到devDependencies（开发）

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

npminstall//安装package中所有模块

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

2、语法检查

npminstallgulp-jshint--save-dev

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

转换html为js模块

npminstallgulp-angular-templatecache--save-dev

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

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

npminstallgulp-cssmin--save-dev

//合并压缩css命令--gulpdeployCSS
varcssmin=require('gulp-cssmin');
gulp.task('deployCSS',function(){
returngulp.src(paths.css)
.pipe(cssmin())
.pipe(concat('all.css'))
.pipe(gulp.dest('./build'));
});

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

npminstallgulp-uglify--save-dev//压缩
npminstallgulp-concat--save-dev//合并
npminstallgulp-sourcemapsy--save-dev//处理JavaScript时生成SourceMap
npminstallgulp-strip-debug--save-dev//去除打印

//测试生产两种js压缩命令--生产gulpjs--prod测试gulpjs--dev
gulp.task('js',function(type){
console.log(type);
if(type=='dev'){//dev
returngulp.src(paths.js)
.pipe(concat('all.js'))
.pipe(gulp.dest('./build'));
}else{//prod
returngulp.src(paths.js)
.pipe(sourcemaps.init())
.pipe(stripDebug())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./build'));
}
});

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

npminstallgulp-inject--save-dev

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

开发环境

//dev资源引用命令--gulpdevIndex
gulp.task('devIndex',['clean','jshint'],function(){
//It'snotnecessarytoreadthefiles(willspeedupthings),we'reonlyaftertheirpaths:
returngulp.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('./'));
});

生产环境

//生产环境资源引用命令--gulpdeployIndex
gulp.task('deployIndex',['clean','jshint','template','js','deployCSS'],function(){
//It'snotnecessarytoreadthefiles(willspeedupthings),we'reonlyaftertheirpaths:
returngulp.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');
}]);

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

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

热门推荐

随机推荐