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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 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将数据导入到Foxmail
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
React实现轮播效果
2020/08/25 Javascript
Python3中列表list合并的四种方法
2019/04/19 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
django实现后台显示媒体文件
2020/04/07 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python如何读写二进制数组数据
2020/08/01 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers