Yeoman_Bower_Grunt

Yeoman安装

在Web项目的立项阶段使用yeoman来生成项目文件，代码结构。

提供自动化开发流程的一整套工具
代码校验，测试，压缩

yeoman官网

npm install -g yo

需要安装
generator

运行

yo -v

按照步骤进行，如果报错找到不到的话，需要手动安装生成器generator。

例如：使用到angular项目：

    
npm install -g  generator-angular

官方生成器

Bower安装

库文件的版本管理

npm install bower

Grunt 安装

自动化，压缩，编译，单元测试，代码校验

npm install grunt-cli
npm install grunt

Yeoman创建项目

以angular为例：

yo angular myanuglar  // 创建

yeoman是以Node为基础构建的项目文件

Bower应用

bower是一个web的包管理器
bower管理的包的源码都是托管在github网站，所以尽量使用git命令行控制来使用指令。
默认目录为：bower_components

bower install jquery

使用其它方式来安装包：

1：github短名称

bower install jquery/jquery

2：使用github完整目录安装

bower install https://github.com/jquery/jquery.git

3：直接通过URL来进行安装

bower install http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js

使用搜索的时候： jquery owner:jquery 查询当前团队开发的项目。

生成bower.json配置文件

bower init

bower.json其中devDependencies字段开发环境

bower install angular --save-dev     // 安装并添加到开发环境dev字段中
bower install angular --save         // 添加到生成环境中的字段.

bower需要配合grunt来一起使用，单独使用局限于包的引用路径麻烦。

Grunt使用

三个基本概念task, target,options

Gruntfile.js文件：

module.exports = function(grunt){
    
    require('time-grunt')(grunt);
    
    require('load-grunt-tasks')(grunt); // 会自动寻找 package中 声明的grunt 全部加载进来
    
    let config = {
        app: 'app',
        dist: 'dist'
    }
    
    // 配置文件
    grunt.initConfig({
            
            // 压缩
            uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
            src: 'app/<%= pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
          }
        }
            
            jshint: {
          files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
          options: {
            globals: {
              jQuery: true
            }
          }
        }
            // 任务   编译 Less
        less: {
        build: {
          expand: true, // 动态编译
          cwd: 'less/',   // 所有的'src'里指定文件都是相对于这个属性指定的路径
          src: '['*.less']', // 相对与cwd路径下需要匹配的文件，这个地方是匹配所有的less文件
          dist: 'css/',
          ext: '.css'
        }
        },
        
        sass: {
        build: {
          expand: true, // 动态编译
          cwd: 'sass/',   // 所有的'src'里指定文件都是相对于这个属性指定的路径
          src: '['*.scss']', // 相对与cwd路径下需要匹配的文件，这个地方是匹配所有的less文件
          dist: 'sass/',
          ext: '.css'
        }
        },
        
        // 合并文件
        concat: {
              options: {
                // 定义一个用于插入合并输出文件之间的字符
                separator: ';'
              },
              dist: {
                // 将要被合并的文件
                src: ['src/**/*.js'],
                // 合并后的JS文件的存放位置
//                dest: 'dist/<%= pkg.name %>.js'
                    dest: 'dist/libs.js'
              }
            }

        // 检测
        watch: {
        files: ['less/**/*.less'], // 监听less文件夹下，所有less文件，以及所有目录下的less文件
        tasks: ['default'] // 当上面被监听的文件发生变化的时候会执行这个任务
        }
    });
    
    // 开启任务
    grunt.registerTask('default', ['less']);
    
}