最近开始新项目,在项目构建上面寻找合适的东西,grunt,bower到发现yeoman;学习了下,把一些东西记录下来然留着以后用.

1.什么是Yeoman

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

Yeoman的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。

• yo - the scaffolding tool from Yeoman
• bower - the package management tool
• grunt - the build tool

Yeoman就是快速创建webapp,初始化了各个版本的文件目录有关bower和grunt的配置.初始化过程中以询问模式处理.

2.安装Yeoman

依赖:Nodejs 如果需要使用sass 要安装Ruby

在安装玩完 nodejs的情况下

终端运行:

npm install -g yo

npm install -g grunt-cli bower

3.install 基本的项目模板(generator);

yeoman提供了一些基本的模板 如:

generator-webapp

generator-angular

使用命令添加

npm install generator-angular -g 

 

more

4.可以创建自己的 generator

creat

5. generator-angular 示例

初始化项目

 i 初始化一个以angualr为基础的项目

yo angular

终端显示如下:

根据需求选择你需要的依赖

 一段时间后项目生成如下结构

 其中很多配置文件yeoman都给我们自动创建好了 比如package.json  Gruntfile.js .gitignore 等配置文件.

到这里项目创建成功了!

-----------------

6.分析下 Gruntfile.js

这是创建的示例Gruntfile.js

// Generated on 2014-07-02 using generator-angular 0.9.1
'use strict';// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {// Load grunt tasks automaticallyrequire('load-grunt-tasks')(grunt);// Time how long tasks take. Can help when optimizing build timesrequire('time-grunt')(grunt);// Configurable paths for the applicationvar appConfig = {app: require('./bower.json').appPath || 'app',dist: 'build'};// Define the configuration for all the tasks
  grunt.initConfig({// Project settings
    yeoman: appConfig,// Watches files for changes and runs tasks based on the changed files
    watch: {bower: {files: ['bower.json'],tasks: ['wiredep']},js: {files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],tasks: ['newer:jshint:all'],options: {livereload: '<%= connect.options.livereload %>'}},jsTest: {files: ['test/spec/{,*/}*.js'],tasks: ['newer:jshint:test', 'karma']},styles: {files: ['<%= yeoman.app %>/styles/{,*/}*.css'],tasks: ['newer:copy:styles', 'autoprefixer']},gruntfile: {files: ['Gruntfile.js']},livereload: {options: {livereload: '<%= connect.options.livereload %>'},files: ['<%= yeoman.app %>/{,*/}*.html','.tmp/styles/{,*/}*.css','<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}']}},// The actual grunt server settings
    connect: {options: {port: 9000,// Change this to '0.0.0.0' to access the server from outside.hostname: 'localhost',livereload: 35729},livereload: {options: {open: true,middleware: function (connect) {return [connect.static('.tmp'),connect().use('/bower_components',connect.static('./bower_components')),connect.static(appConfig.app)];}}},test: {options: {port: 9001,middleware: function (connect) {return [connect.static('.tmp'),connect.static('test'),connect().use('/bower_components',connect.static('./bower_components')),connect.static(appConfig.app)];}}},dist: {options: {open: true,base: '<%= yeoman.dist %>'}}},// Make sure code styles are up to par and there are no obvious mistakes
    jshint: {options: {jshintrc: '.jshintrc',reporter: require('jshint-stylish')},all: {src: ['Gruntfile.js','<%= yeoman.app %>/scripts/{,*/}*.js']},test: {options: {jshintrc: 'test/.jshintrc'},src: ['test/spec/{,*/}*.js']}},// Empties folders to start fresh
    clean: {dist: {files: [{dot: true,src: ['.tmp','<%= yeoman.dist %>/{,*/}*','!<%= yeoman.dist %>/.git*']}]},server: '.tmp'},// Add vendor prefixed styles
    autoprefixer: {options: {browsers: ['last 1 version']},dist: {files: [{expand: true,cwd: '.tmp/styles/',src: '{,*/}*.css',dest: '.tmp/styles/'}]}},// Automatically inject Bower components into the app
    wiredep: {options: {cwd: '<%= yeoman.app %>'},app: {src: ['<%= yeoman.app %>/index.html'],ignorePath:  /..\//}},// Renames files for browser caching purposes
    filerev: {dist: {src: ['<%= yeoman.dist %>/scripts/{,*/}*.js','<%= yeoman.dist %>/styles/{,*/}*.css','<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}','<%= yeoman.dist %>/styles/fonts/*']}},// Reads HTML for usemin blocks to enable smart builds that automatically// concat, minify and revision files. Creates configurations in memory so// additional tasks can operate on them
    useminPrepare: {html: '<%= yeoman.app %>/index.html',options: {dest: '<%= yeoman.dist %>',flow: {html: {steps: {js: ['concat', 'uglifyjs'],css: ['cssmin']},post: {}}}}},// Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {html: ['<%= yeoman.dist %>/{,*/}*.html'],css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],options: {assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']}},/*The following *-min tasks will produce minified files in the dist folderBy default, your `index.html`'s <!-- Usemin block --> will take care ofminification. These next options are pre-configured if you do not wishto use the Usemin blocks.*/cssmin: {dist: {files: {'<%= yeoman.dist %>/styles/main.css': ['.tmp/styles/{,*/}*.css']}}},uglify: {dist: {files: {'<%= yeoman.dist %>/scripts/scripts.js': ['<%= yeoman.dist %>/scripts/scripts.js']}}},concat: {dist: {}},imagemin: {dist: {files: [{expand: true,cwd: '<%= yeoman.app %>/images',src: '{,*/}*.{png,jpg,jpeg,gif}',dest: '<%= yeoman.dist %>/images'}]}},svgmin: {dist: {files: [{expand: true,cwd: '<%= yeoman.app %>/images',src: '{,*/}*.svg',dest: '<%= yeoman.dist %>/images'}]}},htmlmin: {dist: {options: {collapseWhitespace: true,conservativeCollapse: true,collapseBooleanAttributes: true,removeCommentsFromCDATA: true,removeOptionalTags: true},files: [{expand: true,cwd: '<%= yeoman.dist %>',src: ['*.html', 'views/{,*/}*.html'],dest: '<%= yeoman.dist %>'}]}},// ngmin tries to make the code safe for minification automatically by// using the Angular long form for dependency injection. It doesn't work on// things like resolve or inject so those have to be done manually.
    ngmin: {dist: {files: [{expand: true,cwd: '.tmp/concat/scripts',src: '*.js',dest: '.tmp/concat/scripts'}]}},// Replace Google CDN references
    cdnify: {dist: {html: ['<%= yeoman.dist %>/*.html']}},// Copies remaining files to places other tasks can use
    copy: {dist: {files: [{expand: true,dot: true,cwd: '<%= yeoman.app %>',dest: '<%= yeoman.dist %>',src: ['*.{ico,png,txt}','.htaccess','*.html','views/{,*/}*.html','images/{,*/}*.{webp}','fonts/*']}, {expand: true,cwd: '.tmp/images',dest: '<%= yeoman.dist %>/images',src: ['generated/*']}]},styles: {expand: true,cwd: '<%= yeoman.app %>/styles',dest: '.tmp/styles/',src: '{,*/}*.css'}},// Run some tasks in parallel to speed up the build process
    concurrent: {server: ['copy:styles'],test: ['copy:styles'],dist: ['copy:styles','imagemin','svgmin']},// Test settings
    karma: {unit: {configFile: 'test/karma.conf.js',singleRun: true}}});grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {if (target === 'dist') {return grunt.task.run(['build', 'connect:dist:keepalive']);}grunt.task.run(['clean:server','wiredep','concurrent:server','autoprefixer','connect:livereload','watch']);});grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) {grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');grunt.task.run(['serve:' + target]);});grunt.registerTask('test', ['clean:server','concurrent:test','autoprefixer','connect:test','karma']);grunt.registerTask('build', ['clean:dist','wiredep','useminPrepare','concurrent:dist','autoprefixer','concat','ngmin','copy:dist','cdnify','cssmin','uglify','filerev','usemin','htmlmin']);grunt.registerTask('default', ['newer:jshint','test','build']);
};

 

 

 

 

------------

参考: 

http://yeoman.io/

http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html

http://www.36ria.com/6144