当前负责的官网采用Grunt+bower+swig技术方案开发
Grunt:管理node下NPM模块插件,插件包汇总体现在pakage.json文件中,插件最终下载到node-modules文件夹下;
bower:js插件包管理,前端模块,插件包汇总体现在bower.json文件中,插件最终下载到vendors文件夹下;
swig:模板引擎,页面模板实现;
环境搭建:
一、Grunt是基于node.js来运行的,因此第一步需要先安装node: https://nodejs.org/。安装node.js比较简单,下载下来一步步进行即可,安装完之后,可以在控制台中输入“node -v”来查看nodejs的版本及是否安装成功。
二、安装Grunt-CLI(http://www.gruntjs.net/getting-started)。以下操作需要在联网情况下进行,windows系统需以管理员身份运行cmd。执行命令:npm install -g grunt-cli,mac os 系统、部分linux系统中,在这句话的前面加上“sudo”指令(需等待联网安装)。
然后,验证一下grunt-cli是否安装完成并生效,继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:
三、安装bower(http://bower.io/)。同上,在命令行中输入命令:npm install -g bower,等待联网安装:
输入 bower help 可查看其相关命令。
项目搭建好之后,想要生成项目依赖的框架及插件,需要到项目根路径下执行命令:bower install,会在vendors文件夹下创建插件包。
//安装时,同步更新到bower.json
bower install ** --save handlebars
bower ENOGIT git is not installed or not in the PATH
将git添加到环境变量path中。
四、安装依赖插件,这里通过package.json批量安装,因此跳转到项目根目录下,执行命令:npm install 即可。会在根目录下生成node-modules文件夹。
将配置文件中配置项全部下载,配置文件如下:package.json
{
"name": "onealert-site",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cdnify": "^0.1.1",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.8.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-less": "^1.0.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-favicons": "^0.6.4",
"grunt-modernizr": "^0.5.2",
"grunt-newer": "^0.7.0",
"grunt-rev": "^0.1.0",
"grunt-sitemap": "^1.2.1",
"grunt-svgmin": "^0.4.0",
"grunt-usemin": "^2.3.0",
"grunt-wiredep": "^1.7.0",
"jshint-stylish": "^0.4.0",
"load-grunt-tasks": "^0.4.0",
"lodash": "^3.5.0",
"markdown": "^0.5.0",
"swig": "^1.4.2",
"time-grunt": "^0.4.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"postinstall": "node_modules/.bin/bower install"
}
}
bower.json
{
"name": "onealert-site",
"private": true,
"dependencies": {
"bootstrap": "3.3.5",
"bootstrap-hover-dropdown": "~2.1.3",
"css3-mediaqueries-js": "~1.0.0",
"es5-shim": "~4.1.0",
"ExplorerCanvas": "*",
"flexslider": "*",
"font-awesome": "~4.3.0",
"html5shiv": "~3.7.2",
"jquery": "1.11.2",
"jquery_lazyload": "jquery.lazyload#~1.9.7",
"jquery-migrate": "~1.2.1",
"jquery.placeholder": "~0.2.4",
"modernizr": "~2.8.2"
}
}
开发过程中使用命令:
grunt serve:开发环境,试试编译本地代码,及时查看效果;
grunt test:测试环境,基于本地生成测试模拟;
grunt dist:发布打包,于dist文件夹中生成可部署文件包;