首页 > 代码库 > 初识yeoman

初识yeoman

      最近开始新项目,在项目构建上面寻找合适的东西,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 automatically  require(‘load-grunt-tasks‘)(grunt);  // 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: ‘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 folder    By default, your `index.html`‘s <!-- Usemin block --> will take care of    minification. These next options are pre-configured if you do not wish    to 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‘  ]);};
Gruntfile.js

 

 

 

 

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

参考: 

http://yeoman.io/

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

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