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


Posted in Javascript onJuly 19, 2017

gulp介绍

基于流的前端自动化构建工具,利用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 rel="stylesheet" href="build/all.css" rel="external nofollow" >
 <!-- 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');
}]);

总结

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

Javascript 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
JS 实现分页打印功能
May 16 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 #Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 #Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用require.js与angular搭建spa应用的方法实例
Jul 19 #Javascript
ztree简介_动力节点Java学院整理
Jul 19 #Javascript
You might like
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
Python简单实现Base64编码和解码的方法
2017/04/29 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python常见字典内建函数用法示例
2018/05/14 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python定义类的简单用法
2020/07/24 Python
如何使用python写截屏小工具
2020/09/29 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
学院书画协会部门岗位职责
2013/12/01 职场文书
感恩教育活动总结
2014/05/05 职场文书
入党群众意见范文
2015/06/02 职场文书
信息技术课教学反思
2016/02/23 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python