文档章节

前端开发自动化工具Grunt和bower

D
 DoIt
发布于 2016/06/28 15:30
字数 1765
阅读 12
收藏 1
点赞 0
评论 0

自动化工作流

我们的产品基于复杂的流程,有很多步骤需要执行,比如从最后一次部署清理临时文件。
校验代码,连接和最小化javascript文件,拷贝图片,配置文件等资源文件,运行测试等等其它工作。

根据环境的不同,工作流的内容也可能有所不同。
使用Grunt自动工作流
使用Bower管理包

Grunt是一个JavaScript任务运行器,它自动运行重复的繁杂的任务。
它也可以将希望被执行的任务打包成任何序列,来创建工组流。

基于插件工作,它有一个庞大的生态系统拥有成千上万的可下载的插件选择。
我们也可以创建自己的插件并共享到社区。

npm install -g grunt-cli grunt


Gruntfile.js 文件是用JavaScript定义的每个任务,插件和工作流的配置。

module.exports = function(grunt){    
    //1-- 配置每个任务
    grunt.initConfig({    
    });
    
    //2-- 加载插件
    grunt.loadNpmTasks('plugin name');
    
    //3-- 通过对任务分组创建一个工作流
    grunt.registerTask('taskName',['task1','task2','task3']);
}
可以通过 npm init 生成下面的依赖管理文件:
package.json 

创建一个分发包:
在向生产环境部署之前,我需要创建一个优化的分发包:
性能:通过连接步骤,我们可以大大减少浏览器请求次数。
应用程序所有的脚本都可以被连接成一个文件。
接着是缩小步骤,移除文件中所有的空白,行间隔,评论,替换本地变量和函数使它们
比原来定义更短一些。这样通过减少需要传递的字节数来提高性能。
HTML和CSS文件也需要被缩小,图片可以通过特定的处理器优化。
Grunt有许多处理以上任务的插件可以下载使用。


安全:通过移除空格,行段,评论和替换本地变量名,javascript文件变的更加难以理解。
我们应该使用数组来定义依赖机制,将每个依赖定义成字符串。

质量:这里有两个步骤来提高分发内容的质量。第一个校验步骤,比如JSLint或者JSHint。

1、清理安装
   首先清理我们上一次安装的文件,它可以通过插件grunt-contrib-clean来完成。
   注意哪些需要配置哪些目录,防止一些文件被错删。
   安装该插件: npm install grunt-contrib-clean --save-dev
   
   安装之后我们需要配置它:
   Gruntfile.js
   
   module.exports = function(grunt){
    grunt.initConfig({
        clean:{
            dist:["dist/"]
        }
    });
    
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.registerTask("dist",["clean"]);
   }
   
   这里我们创建了分发文件包位于dist/目录下。
   
 2、校验步骤:校验我们使用插件 grunt-contrib-jsint
    通过如下命令安装它:
    npm install grunt-contib-jsint --save-dev
    
    然后再gruntfile.js文件中对其进行配置
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                all:['Gruntfile.js','js/**/*.js','test/**/*.js']
            }
        });
    
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        
        grunt.registerTask("dist",["clean","jshint"]);
    }
    
3、连接阶段:通过插件grunt-contrib-concat ,连接配置设置的原文件成一个目标文件。
该插件安装命令:
    npm install grunt-contrib-concat --save-dev
    
    接下来在gruntfile.js文件中配置该插件:
    我们通过concat对象的src属性设置源文件目录,通过dest属性设置目标文件目录。
    
    module.exports = function(grunt0{
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["src/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            }
        });
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat"]);
}
   
 4、Minifying 步骤:
    缩小步骤,包括去掉空格,换行符,评论,替换变量和函数名等操作。
    这些都可以使用插件 grunt-contrib-uglify 完成
    npm install grunt-contrib-uglify --save-dev
    
    配置该插件,跟grunt-contrib-concat类似,需要定义uglify对象的src和dest属性。
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify"]);
    }

5、拷贝步骤,有许多文件比如images,fonts等其它需要无损的拷贝的文件。
    可以使用grunt-contrib-copy插件来定义完成,它能够拷贝文件夹和文件。
    npm install grunt-contib-copy --save-dev
    
    配置信息:
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"]
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy"]);
    }
    
6、测试步骤:
   Grunt调用grunt-karma插件通过读取karma.conf.js 文件,并运行测试。
   插件安装:npm install grunt-karma --save-dev
   在Gruntfile.js文件中我们只需要配置Karam的配置文件位置即可。
   
   module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karma:{
                dist:{
                    configFile:"karam.conf.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.registerTask("dist", ["clean", "jshint", "concat",
        "uglify", "copy", "karma"]);
    }

7、运行阶段:    
    作为最后一个可选步骤,是在分发包被编译后运行应用程序。
    Grunt有一个服务器插件 grunt-connect
    安装它: npm install grunt-contrib-connect --save-dev
    
    在Gruntfile.js文件中对服务插件进行配置:
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karam:{
                dist:{
                    configFile:"karam.conf.js"
                }
            },
            connect:{
                dist:{
                    options:{
                        port:9001,
                        base:'dist/'
                    }
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.loadNpmTasks("grunt-contrib-connect");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify","copy","karma","connect:dist:keepalive"]);
    }
    
    注意在配置 connect运行时需要使用keepalive否则服务只会在Grunt运行时运行。
    
    所有插件安装完成后的package.json 文件内容:
    {
        "name": "parking",
        "version": "0.1.0",
        "devDependencies": {
            "grunt": "~0.4.5",
            "grunt-contrib-clean": "~0.5.0",
            "grunt-contrib-jshint": "~0.10.0",
            "grunt-contrib-concat": "~0.4.0",
            "grunt-contrib-uglify": "~0.5.0",
            "grunt-contrib-copy": "~0.5.0",
            "grunt-karma": "~0.8.3",
            "karma": "~0.12.16",
            "grunt-contrib-connect": "~0.8.0"
        }
    }
    
    我们还可以直接创建package.json文件,然后运行 npm install 来一次性完成安装。
    
    
执行工作流:

grunt <name of the task or workflow>

比如执行一个清理任务:

grunt clean

我们可以为每个任务定义多个配置文件,比如connect 服务
connect: {
    production: {
        options: {
            port: 9001,
            base: 'dist/'
        }
    },
    development: {
        options: {
            port: 9002,
            base: '/'
        }
    }
}

我们还可以生成两个连接文件,一个是源代码连接文件,一个是类库连接文件。
concat: {
    js: {
        src: ["js/**/*.js"],
        dest: "dist/js/scripts.js"
    },
    lib: {
        src: ["lib/**/*.js"],
        dest: "dist/lib/lib.js"
    }
}

运行命令: grunt concat

或者分别执行:
grunt concat:js
grunt concat:lib


使用Bower进行包管理
Bpwer是Twitter推出的包管理器,聚焦于前端应用。

安装 bower
 
npm install -g bower

查找包
bower search <package name>

安装包
bower install <package name>

bower install angular --save

该angular包惠被从Git库中下载并存放到bower_components/ 目录下。
--save 指令用于更新bower.json 文件。

我们可以通过
bower list 
查看下载的包列表

更新包
bower update <package name>

卸载包
bower uninstall angularjs-file-upload --save

使用包:
<script src="bower_components/angular/angular.min.js"></script>


缓存
移除的包会在Bower的缓存中有残留,位于用户的 home 文件夹的 cache/bower 目录下,我们可以通过如下指令
查看
bower cache list

Bower还可以离线安装包,只需要执行如下命令
bower install angular --offline

清理缓存包并删除所有下载包
bower cache clean

© 著作权归作者所有

共有 人打赏支持
D
粉丝 3
博文 53
码字总数 248750
作品 0
海淀
高级程序员
如何构建自动化的前端开发流程

我们先来看下前端开发可能存在的问题: 我们有许多的第三方库的依赖需要管理; 我们有独立的前端测试需要自动运行; 我们还有很多代码需要在发布时进行打包压缩; ⋯⋯ 所以构建一个自动化的...

-鹏 ⋅ 2015/11/13 ⋅ 0

前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生 ⋅ 2016/05/09 ⋅ 0

Yeoman:Web 应用开发流程与工具

随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多。应用的很多实现逻辑被转移到了浏览器端来实现。浏览器不再只提供单一的数据接收...

oschina ⋅ 2014/03/08 ⋅ 4

Yeoman:Web 应用开发流程与工具

随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多。应用的很多实现逻辑被转移到了浏览器端来实现。浏览器不再只提供单一的数据接收...

IBMdW ⋅ 2014/03/24 ⋅ 1

学习之路/目录

目标 从今日起,我将开启我的学习模式,我会将我每学习的一个技能,分享学习的过程和内容,在记录自己知识点的同时也分享经验,有不足之处还希望朋友们见谅,毕竟本人能力有限。 路线 我的知...

DennisGuo ⋅ 2015/11/23 ⋅ 0

前端的一些工具和概念、框架

前端目前发展真是百家争鸣热闹的很,也涌现出了大量的框架、工具,下面就是对热门的前端的一个梳理: 1. Node.js:一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Jav...

IT追寻者 ⋅ 2016/06/16 ⋅ 0

搭建前端开发环境

node -v npm -v npm install -g grunt-cli grunt --version npm install grunt npm install -g bower bower -v npm install -g karma karma start npm install -g karma-jasmine copyright =......

墨衣夜行 ⋅ 2015/10/12 ⋅ 0

Spatra/TeamMindmap

项目说明 简介 将思维导图运用到团队协作中, 并提供在线的思维导图绘制功能. 相关技术点 项目后端采用Laravel 4.2构建 前端使用Twitter Bootstrap作为UI基本构件,AngularJS被应用于编写Web...

Spatra ⋅ 2015/01/28 ⋅ 0

nodejs+grunt+mocha+express+postgres搭建开发环境

nodejs/bower/grunt/mocha/express/postgres搭建开发环境 nodejs 流行的异步IO解决方案,链接http://nodejs.org/ bower 前段框架管理工具 grunt 自动化工具gruntjs.com mocha 自动化单元测试...

深山猎人 ⋅ 2015/01/21 ⋅ 0

Node.js+Yeoman构建前端自动化Web应用

Yeoman的诞生,旨在为开发者提供一系列健壮的工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。Yeoman主要包含三个部分:yo(脚手架工具)、grunt(构建工具)、bower(包...

大笨牛一只 ⋅ 2015/06/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 5分钟前 ⋅ 0

Cube、Cuboid 和 Cube Segment

1.Cube (或Data Cube),即数据立方体,是一种常用于数据分析与索引的技术;它可以对原始数据建立多维度索引。通过 Cube 对数据进行分析,可以大大加快数据的查询效率 2.Cuboid 在 Kylin 中特...

无精疯 ⋅ 43分钟前 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 45分钟前 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 55分钟前 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 58分钟前 ⋅ 0

Redis 注册为 Windows 服务

Redis 注册为 Windows 服务 redis 注册为 windows 服务相关命令 注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 启动服务 re......

Os_yxguang ⋅ 59分钟前 ⋅ 0

世界那么大,语言那么多,为什么选择Micropython,它的优势在哪?

最近国内MicroPython风靡程序界,是什么原因导致它这么火呢?是因为他功能强大,遵循Mit协议开源么? 错!因为使用它真的是太舒服了!!! Micropython的由来,这得益于Damien George这位伟大...

bodasisiter ⋅ 今天 ⋅ 0

docker 清理总结

杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器(docker rm没有加-f参数,运行中的容器不会删掉) docker rm $(docker ps -a -q) 删除所有未打 dangling 标...

vvx1024 ⋅ 今天 ⋅ 0

关于学习

以前学车的时候,教练说了这样的一句话:如果一个人坐在车上一直学,一直学,反而不如大家轮流着学。因为一个人一直学,就没有给自己留空间来反思和改进。而轮流着学的时候大家下来之后思考上...

mskk ⋅ 今天 ⋅ 0

压缩工具之gzip-bzip2-xz

win下常见压缩工具:rar zip 7z linux下常见压缩工具:zip gz bz2 xz tar.gz tar.bz2 tar.xz gzip 不支持目录压缩 gzip 1.txt #压缩。执行后1.txt消失,生成1.txt.gz压缩文件 gzip -d 1.txt....

ZHENG-JY ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部