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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
javascript new一个对象的实质
Jan 07 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 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 文件缓存函数
2011/10/08 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php导出excel格式数据问题
2014/03/11 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php数组查找函数总结
2014/11/18 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
JQuery 操作/获取table具体代码
2013/06/13 Javascript
javascript操作css属性
2013/12/30 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
init进程的作用
2012/04/12 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
销售文员岗位职责
2013/11/29 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
幼儿园辞职信
2015/05/13 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers