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.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 requirejsbower 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

项目已经可以跑起来了,如果配置中有什么问题欢迎留言评论,本人第一次写博客,共同成长共同进步

时间: 11-21

Yeoman+Requirejs的相关文章

利用yeoman快速搭建React+webpack+es6脚手架

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

前端工程构建工具之Yeoman

一.Yeoman 简介 通常在开发新项目时我们都需要配置工程环境,开发目录,需要下载一些库.框架文件(如 jQuery.Backbone 等),配置编译环境(Less.Sass.Coffeescript等),甚至还要配置单元测试框架,过程非常繁琐,还没开始编码时间就耗了大半天.为了解决这个问题 Paul Irish.Addy Osmani.Sindre Sorhus.Mickael Daniel.Eric Bidelman 和 Yeoman 社区共同开发的一个项目--Yeoman. Yeoman

Yeoman自动构建js项目(转)

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网页都很流畅.Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低.非常适合小型网站,个性化网站,我们自己的Geek网站!! 前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,

yeoman(转)

前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世,伴随着一个新的名词“脚手架(scaffolding)”出现了.脚手架是一种提高开发效率的工具的代名词.随后,各种编程语言都开始实现自己的“脚手架”工具.Maven重新构造了Java的世界,改变了几千万的开发者对于Java项目构建的认识.Yeoman在Javascript领域正做着同样的事情. 看着各

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

原文转自:http://blog.jobbole.com/62098/ 随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多.应用的很多实现逻辑被转移到了浏览器端来实现.浏览器不再只提供单一的数据接收和展现功能,而是提供更多的用户交互能力.浏览器端所包含 的 HTML.CSS 和 JavaScript 代码也变得更加复杂.对于日益复杂的前端代码,需要有更好的流程和工具来管理开发的各个方面,包括初始的代码结构.开发流程和自

google yeoman

Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML.CSS.Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流. Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系. Yeoman主要有三部分组成:yo(脚手架工具).grunt(构建工具).bower(包管理器).这三个工具是分别独立开发的,但是需要配合使用

自己写的一个Yeoman的Generator-Require-Angularjs

Yeoman是一个常见的工作流,能够很方面的搭建属于自己的脚手架. 这段时间我用闲暇时间写了一个Generator来玩了一下,这个Generator的主要目的是快速建立一个RequireJS+AngularJS的项目. 当前进度 版本: 0.0.1 功能: 初始化项目,快速添加控制器,添加路由信息 下一步: 增加指令,服务,将路由改为angular-ui,然后完善publish命令 用法 安装Yeoman和Bower > npm install -g yo bower 安装generator >

编写自定义Yeoman生成器

转载自JSCON-简时空:<自定义Yeoman生成器> 1.Getting Started 1.1.设置Node模块 Yeoman提供了generator-generator方便快速编写自己的生成器. 安装: npm install -g generator-generator运行: yo generator 创建一个名为generator-name的文件夹(name为你的生成器名);[important] 创建package.json文件,这是NodeJS模块的“信息图”,可以手动或者使用命

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main