Grunt + Bower—前端构建利器
目前比较流行的WEB开发的趋势是前后端分离。前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行数据交互。
对于后端服务语言来说,不论是Ruby的rack,Java中的Maven或Gradle,或是Scala中的SBT,他们都能够提供编译运行、运行测试、打包部署、依赖管理等功能。再加上强大的插件系统,让它可以插拔式的使用很多强大的功能,像数据迁移工具(liquibase),测试覆盖率插件以及一些代码样式检查的工具。
但是对于前端Javascript和CSS而言,很少有工具可以做到前面所述功能的集合。那么我们怎么样才能达到前面所说的说有功能呢?——Grunt + Bower
Grunt号称自己是JavaScript世界的构建工具,它提供了强大的自动化功能。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻我们的劳动。Grunt同样拥有强大的插件系统,你所需要的大多数task都已经作为Grunt插件被开发了出来,并且每天都有更多的插件诞生。
但这还不够完美。
我们知道,在JavaScript开发当中,我们经常需要引入大量的开源工具。不可避免的会遇到不同版本之间的兼容性问题,例如Bootstrap所依赖的JQuery不是1.10,而是2.03。如果你正在做JS版本升级,那么我想你一定会到各个网站上把他们最新的包下载下来,然后小心翼翼的替换它的版本。但是这些功能在Gradle和其他后端的版本管理工具里已经不再是问题。Bower的出现,完美的解决了这一难题。
在javascript的世界里,很多东西都是由社区提供的,所以每一种工具都相当独立。比如,工具都有着自己独立的配置文件,自己的命令行参数,有时候还需要有一些额外的插件把两个工具结合起来。所以下面将会有很多命令,我们需要一一了解。不过好在我们了解之后,下次就可以使用已经配置好的文件,通过几条命令将把有的东西都准备好,很方便。
第一步:安装nodejs
在Windows中,我们可以到官网下载安装包:https://nodejs.org/dist/v4.4.7/node-v4.4.7-x64.msi
在Mac中,我们可以使用brew来安装。
brew install node
Nodejs可以让我们在服务器端使用javascript编程,它是很多js工具的基础。请确保它是最新的:
brew upgrade node
Npm是node官方提供的包依赖管理工具。我们下面使用的Grunt,Bower等,都是以插件形式下载安装的。当我们安装好nodejs后, npm 就自动可用了。查看版本:
npm -v
接下来新建一个目录cos-form,然后运行npm init,根据提示,最后会产生一个package.json如下:
{
"name": "cos-form",
"version": "1.0.0",
"description": "This is for grunt and bower",
"main": "index.js", "repository": {
"type": "git",
"url": "https://github.com/yeahyangliu/grunt_bower.git"
}
}
第二步:安装Grunt
你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo:
npm install -g grunt-cli
上述命令执行完后,grunt
命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装grunt-cli
并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile
在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。
在Grunt项目里一般需要在你的项目中添加两份文件:package.json
和 Gruntfile
。其中package.json中里面已经包含了一些Grunt常用的插件,比如 grunt-contrib-jshint 等,我们可根据需要删减一些用不上的。那么现在我们的文件应该长成这样:
{
"name": "cos-form",
"version": "1.0.0",
"description": "This is for grunt and bower",
"main": "index.js",
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-bower-task": "^0.4.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-qunit": "^1.2.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}
下面,我们需要一个gruntfile,gruntfile中定义了插件的功能,并且可以自定义一些任务来管理我们Javascript代码。通过执行下面命令生成一个gruntfile:
npm install grunt-init -g
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init ~/.grunt-init/gruntfile
接下来只需要把所有package.json中的插件通过npm装在本目录,我们就可以使用Grunt来帮我们运行,管理我们的Javascript代码了。
第三步:安装Bower
Bower跟npm在某种意义上相似,它是用来管理常用的js库的依赖的,比如jquery, underscore, angularjs等。同样我们可以通过npm安装它:
npm install bower -g
同样,Bower也有自己的配置文件bower.json
{
"name": "cos-form",
"version": "1.0.0",
"authors": [
"shencq <shencq@g-soft.com.cn>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
接下来就是我们见证奇迹的时刻:
bower install angularjs --save
bower insall jquery --save
我们就可以看到angular和JQuery已经被下载到本地。同时bower.json中多了两个依赖:
"dependencies": {
"angularjs": "~1.2.20", "jquery": "~2.1.1"
}
而且,我们的目录里,两个版本的js文件也被下载到了本地。如果你觉得现在已经大功告成了,那么你就错了,bower只负责把依赖下载到本地的 bower_components 目录,并不负责把它们拷贝到我们项目中实际使用的地方,比如 public/js/lib 目录下。
为了实现这样的功能,我们还需要另一个插件的帮助:
npm install grunt-bower-task --save-dev
然后打开其文档,按照上面的提示进行配置。首先在 Gruntfile 中合适位置添加:
grunt.loadNpmTasks('grunt-bower-task');
然后在 grunt.initConfig({...}) 参数中,添加相应的配置项,把bower下载的js库拷贝到 public/js/lib 下:
{
"bower"
: {
"install"
: {
"options"
: {
"targetDir"
:
"./public/js/lib"
,
"layout"
:
"byComponent"
,
"install"
:
true
,
"verbose"
:
false
,
"cleanTargetDir"
:
false
}
}
}
}
最后我们只需要运行一行简单的命令,就可以讲grunt和bower完美结合起来:
grunt bower
最后
有了这样两大利器,我们已经达到了从管理依赖,编译部署,压缩打包,运行测试的所有功能,并且非常清晰的配置,让项目上的人都拥有同一份配置,这种方式,大大的简化了团体的管理效率和维护成本,非常值得推崇!
再次感谢大家读到这里。
Grunt + Bower—前端构建利器的更多相关文章
- Grunt + Bower—前端构建利器(转)
目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...
- 前端构建利器Grunt—Bower
runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...
- 仿async/await(一)and Gulp:新一代前端构建利器
NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...
- Gulp:新一代前端构建利器
1.什么是Gulp gulp.js 是一种基于流的,代码优于配置的新一代构建工具. Gulp 和 Grunt 类似.但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建. ...
- Grunt Bower构建前端
Grunt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的W ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- Gulp, 比Grunt更好用的前端构建工具
Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...
- 前端构建工具 Grunt 入门
之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...
- 用Laravel+Grunt+Bower管理你的应用
来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件, ...
随机推荐
- Android4.0图库Gallery2代码分析(二) 数据管理和数据加载
Android4.0图库Gallery2代码分析(二) 数据管理和数据加载 2012-09-07 11:19 8152人阅读 评论(12) 收藏 举报 代码分析android相册优化工作 Androi ...
- Delph组件如何使用自己的图标(转)
源:http://blog.csdn.net/henreash/article/details/7298451
- Java从键盘输入
package my;import java.util.Scanner; public class MyJava { /** * @param args */ public st ...
- Building Your First EDM
1 文件--新建--项目 控制台应用程序,填写信息,确定: 2 在解决方案管理器中,选中AmyConsoleApp,添加新项, 选择ADO.NET 实体数据模型,添加: 3 在选择模型内容中选择“从数 ...
- 系统管理员必须掌握的20个Linux监控工具
需要监控Linux服务器系统性能吗?尝试下面这些系统内置或附件的工具吧.大多数Linux发行版本都装备了大量的监控工具.这些工具提供了能用 作取得相关信息和系统活动的量度指标.你能使用这些工具发现造成 ...
- Crazyflie笔记五: CRTP 实时通信协议(一)(转)
源:Crazyflie笔记五: CRTP 实时通信协议(一) 这里详细介绍了 Crazyflie 的 CRTP实时通信协议的相关内容,由于内容很长,分几篇博文来讲述.这里是第一节内容.欢迎交流:301 ...
- java调用C/C++写的dll(转)
源:java调用C/C++写的dll Java语言本身具有跨平台性,如果通过Java调用DLL的技术方便易用,使用Java开发前台界面可以更快速,也能带来跨平台性. Java调用C/C++写好的DLL ...
- 1227: [SDOI2009]虔诚的墓主人
1227: [SDOI2009]虔诚的墓主人 Time Limit: 5 Sec Memory Limit: 259 MBSubmit: 1083 Solved: 514[Submit][Stat ...
- 转:HTTPS 升级指南
上一篇文章我介绍了 HTTP/2 协议 ,它只有在 HTTPS 环境才会生效. 为了升级到 HTTP/2 协议,必须先启用 HTTPS.如果你不了解 HTTPS 协议(学名 TLS 协议),可以参考我 ...
- C语言-结构体
C语言中数组是把相同类型的数据类型的变量集中在一起了,而结构体则是把不同类型的变量聚集在一起. 结构体也是一种数据类型,但是它是一种自定义的数据类型,也就是说和使用其他数据类型不一样,我们得先定义这种 ...