yeoman bower grunt

一、Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。

1.安装yeoman

npm install -g yo

2.安装generator-webapp库

npm install -g generator-webapp

3.yo webapp快速构建一个web项目

yo webapp

二、bower
Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系。
1.安装bower

npm install bower -g

2.项目初始化,通过回答几个问题,就会自动生成bower.json文件。这是项目的配置文件

bower init

3.配置文件.bowerrc
项目根目录下(也可以放在用户的主目录下)的.bowerrc文件是Bower的配置文件,它大概像下面这样

{
  "directory" : "components",
  "json"      : "bower.json",
  "endpoint"  : "https://Bower.herokuapp.com",
  "searchpath"  : "",
  "shorthand_resolver" : ""
}

其中的属性含义如下

directory:存放库文件的子目录名。
json:描述各个库的json文件名。
endpoint:在线索引的网址,用来搜索各种库。
searchpath:一个数组,储存备选的在线索引网址。如果某个库在endpoint中找不到,则继续搜索该属性指定的网址,通常用于放置某些不公开的库。
shorthand_resolver:定义各个库名称简写形式。

2.库的安装,安装jquery

bower install jquery

3.生成bower.json配置文件

bower init

三、gruntI(http://javascript.ruanyifeng.com/tool/grunt.html)
1.安装grunt-cli
grunt-cli并不grunt,grunt-cli的作用是管理本地各版本的grunt,让命令行可以直接执行grunt命令。
grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。

npm install -g grunt-cli

2全局安装grunt

npm install -g grunt

grunt命令执行,是需要当前目录中包括package.json和Gruntfile.js两个文件。
package.json,是npm项目配置文件
Gruntfile.js,是专门用来配置grunt的配置文件
3.自动生成package.json文件

npm init

4.如果已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上–save-dev参数,该模块就会自动被加入package.json文件。

npm install grunt --save-dev

安装-save-dev,就可以,直接把grunt作为devDependencies写入的package.json中。
5.命令脚本文件Gruntfile.js
新建脚本文件Gruntfile.js。它是grunt的配置文件就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。

module.exports = function(grunt) {

  // 配置Grunt各种模块的参数
  grunt.initConfig({
    jshint: { /* jshint的参数 */ },
    concat: { /* concat的参数 */ },
    uglify: { /* uglify的参数 */ },
    watch:  { /* watch的参数 */ }
  });

  // 从node_modules目录加载模块文件
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 每行registerTask定义一个任务
  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jshint']);

};

上面的代码用到了grunt代码的三个方法:

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。

grunt.loadNpmTasks:加载完成任务所需的模块。

grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块(该例为jshint,concat和uglify);该例的check任务则表示使用jshint插件对代码进行语法检查。

5.Grunt常用插件
grunt-contrib-uglify:压缩js代码
grunt-contrib-concat:合并js文件
grunt-contrib-qunit:单元测试
grunt-contrib-jshint:js代码检查
grunt-contrib-watch:监控文件修改并重新执行注册的任务

npm init
npm install grunt --save-dev
npm install load-grunt-tasks --save-dev
npm install time-grunt --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-clean --save-dev


grunt copy
grunt clean


yo webapp grunt-yo-webapp

推荐阅读更多精彩内容

  • 快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 80,161评论 13 120
  • 系统:macos操作:命令行操作前提:Homebrew npm 安装完毕最近学习React-Native,作为一个...
    离人歌阅读 611评论 0 0
  • 从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部...
    yzc123446阅读 337评论 0 1
  • 希望你们能喜欢。 你有没有试过站在风暴的中心? 那时候你什么也听不到,什么也看不到。 你的身体被飓风支配,它们侵袭...
    白遣阅读 170评论 7 9