Yeoman+Requirejs

浏览数：121 / 时间：2015年06月09日

最近在写一个单页面应用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.md

Further help:
  man brew
  brew home

Yeoman需要用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="bower_components/requirejs/require.js"></script>

但是这样写grunt执行htmlmin命令的时候就会报错，鄙人能力有限，找了很多资料最后给出的写法是这样的"分开"!!!!!!

<!-- build:js(.) scripts/vendor.js -->
   <!-- bower:js -->
   <script src="bower_components/requirejs/require.js"></script>

   <!-- endbower -->
   <!-- endbuild -->

   <!-- build:js({.tmp,app}) scripts/scripts.js -->
   <script src="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