首页 > 代码库 > Yeoman+Requirejs
Yeoman+Requirejs
最近在写一个单页面应用web工程，后端只提供API接口，想来想去决定用Angular来开发，用Yeoman(yo+grunt+bower)+Requirejs来管理，废话少说今天奉献我的开发环境搭建
我用的是mac系统首先要安装brew，用brew来安装node
curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1
安装成功后输入命令brew显示如下信息表示安装成功
Example usage: brew [info | home | options ] [FORMULA...] brew install FORMULA... brew uninstall FORMULA... brew search [foo] brew list [FORMULA...] brew update brew upgrade [FORMULA...] brew pin/unpin [FORMULA...]Troubleshooting: brew doctor brew install -vd FORMULA brew [--env | config]Brewing: brew create [URL [--no-fetch]] brew edit [FORMULA...] open https://github.com/Homebrew/homebrew/blob/master/share/doc/homebrew/Formula-Cookbook.mdFurther help: man brew brew homeYeoman需要用npm来安装，接下来我们安装node，node安装有很多方法，这里用brew来安装
sudo brew install node
安装成功后输入 node -v 和 npm -v显示版本信息正确代表安装成功
安装Yeoman(yo+grunt+bower)的有一篇非常好的文章，链接如下，我这里就不多说了
http://blog.jobbole.com/65399/
执行到这里项目已经可以跑起来了，但是随着js的增多，index.html加载的js文件越来越多，这就需要一个管理的工具，我这里使用了Requirejs
bower install requirejs
bower install requirejs-domready
安装后的bower.json
{ "name": "webapp", "version": "0.0.0", "dependencies": { "jquery": "~1.9.0", "angular": "~1.3.3", "semantic": "~0.19.3", "json3": "~3.3.1", "es5-shim": "~3.1.0", "angular-route": "~1.3.3", "angular-messages": "~1.3.3", "requirejs": "~2.1.15", "requirejs-domready": "~2.0.1" }, "devDependencies": { "angular-mocks": "~1.3.3", "angular-scenario": "~1.3.3" }, "appPath": "app"}在bower_components文件夹下就会有requirejs和requirejs-domready
接下来我们安装grunt-requirejs
grunt install grunt-requirejs --save-dev
在Gruntfile.js中增加
// Load grunt tasks automatically require(‘load-grunt-tasks‘)(grunt); grunt.loadNpmTasks(‘grunt-requirejs‘);//整理增加一条命令 // Time how long tasks take. Can help when optimizing build times require(‘time-grunt‘)(grunt); // Configurable paths for the application var appConfig = { app: require(‘./bower.json‘).appPath || ‘app‘, dist: ‘dist‘ };
grunt.initConfig({
// Project settings
yeoman: appConfig,
requirejs: {//配置requirejs打包，这里就会根据你的文件树，自动将所有的文件都打包进来
dist: {
options: {
baseUrl : ‘.tmp/scripts‘,//打包文件的位置
name : ‘main‘,//要执行的主文件
mainConfigFile : ‘.tmp/scripts/main.js‘,//配置的文件
out : ‘.tmp/concat/scripts/scripts.js‘//输出的位置
}
}
},
在grunt命令中增加一条
grunt.registerTask(‘build‘, [ ‘clean‘,// ‘wiredep‘, ‘useminPrepare‘, ‘concurrent:dist‘, ‘autoprefixer‘, ‘concat‘, ‘ngAnnotate‘, ‘copy‘, ‘requirejs:dist‘,//放在这里，具体的位置根据自己的项目进行调节 ‘cdnify‘, ‘cssmin‘, ‘uglify‘, ‘filerev‘, ‘usemin‘, ‘htmlmin‘ ]);到这里bower和grunt我们配置好了，但是现在我们现在执行命令还不成功
首先requirejs加载文件的写法，官网给出的建议是
<script data-main="main.js" src="http://www.mamicode.com/bower_components/requirejs/require.js"></script>
但是这样写grunt执行htmlmin命令的时候就会报错，鄙人能力有限，找了很多资料最后给出的写法是这样的"分开"!!!!!!
<!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="http://www.mamicode.com/bower_components/requirejs/require.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="http://www.mamicode.com/scripts/main.js"></script>我们来看下main.js配置
‘use strict‘;require.config({ baseUrl: ‘scripts/‘, paths: { jquery: ‘../../bower_components/jquery/jquery‘, angular: ‘../../bower_components/angular/angular‘, angularRoute : ‘../../bower_components/angular-route/angular-route.min‘, angularMessages : ‘../../bower_components/angular-messages/angular-messages‘, requireDomReady : "../../bower_components/requirejs-domready/domReady", app: ‘controllers/app‘, "service" : ‘controllers/service‘, "mainController" : "controllers/main-controller", "frame" : "controllers/frame", "mainLib" : "lib/main-lib", "spin" : "lib/spin", "jquerySpin" : "lib/jquery.spin", "jsrender" : "lib/jsrender", "jAutosize" : "lib/jquery.autosize", "jColor" : "lib/jquery.color", "jUnveil" : "lib/jquery.unveil", "jAtwho" : "lib/jquery.atwho", "video" : "../swf/video" }, shim: { angular : { exports : ‘angular‘}, angularRoute:{ deps:[‘angular‘] }, angularMessages:{ deps:[‘angular‘] }, jsrender:{ exports : ‘jQuery.fn.render‘ }, jColor:{ exports : ‘jQuery.Color‘ }, jUnveil:{ exports : ‘jQuery.fn.unveil‘ }, jAutosize:{ exports : ‘jQuery.fn.autosize‘ } }});require(["jquery", ‘requireDomReady‘,"angular", "angularRoute", "angularMessages","mainLib","app", "mainController"], function($, domReady, angular) { domReady(function() { angular.bootstrap(document.documentElement, [‘myApp‘]); })});这样就会将对应的文件一个加载进来，我们看下app.js，sevice是angular注册的服务
define(["angular", "angularRoute", "angularMessages", "service"], function(angular){ return angular.module("myApp", ["shou.services", "ngRoute", "ngMessages"]);});看下其他controller注册,这里统一注册了controller
define([‘controllers/config-controller‘, ‘controllers/header-controller‘, ......], function(){});这样我们就配置好了Yeoman+Requirejs，我们执行命令
grunt build 最有显示这样代表没有问题啦Done, without errors.Execution Time (2014-11-22 17:38:12 UTC)concurrent:dist 5.4s ▇▇▇▇▇▇ 13%autoprefixer:dist 770ms ▇ 2%ngAnnotate:dist 716ms ▇ 2%copy:dist 711ms ▇ 2%requirejs:dist 11.8s ▇▇▇▇▇▇▇▇▇▇▇▇ 27%cdnify:dist 13.3s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 31%uglify:generated 10.1s ▇▇▇▇▇▇▇▇▇▇ 23%Total 43.3s项目已经可以跑起来了，如果配置中有什么问题欢迎留言评论，本人第一次写博客，共同成长共同进步
Yeoman+Requirejs