【WEB】Grunt入门——前端自动化工具

最近做了一些小实验，算是对前端自动化工具做了个入门，现做记录如下：

1.主流的方式

• Yeoman：http://yeoman.io/
• Bower:https://bower.io/
• Grunt|Gulp：https://gruntjs.com/

工具： CodeKit(把整套流程进行了整合可视化，但仅用于MAC系统)/FIS(百度开发)/Spirit（腾讯开发）

Grunt在其中的角色： Build Tool。
作用：减少像压缩，编译，单元测试，代码校验，这种重复且无业务关联的工作。

---

2.Yeoman,Bower,Grunt的简介和安装

2.1 Yeoman

在Web项目的立项阶段，yeoman用来生成项目的文件和代码结构。
Yeoman为了保证使用最合适当前项目的工具，创建了生成器的生态，例如，若项目在mobile端，则寻找mobile app生成器。

官方说明如下：

What’s Yeoman?

Yeoman helps you to kickstart new projects, prescribing best practices
and tools to help you stay productive.

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.

Through our official Generators, we promote the “Yeoman workflow”. This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

With a modular architecture that can scale out of the box, we leverage the success and lessons learned from several open-source communities to ensure the stack developers use is as intelligent as possible.

As firm believers in good documentation and well thought out build processes, Yeoman includes support for linting, testing, minification and much more, so developers can focus on solutions rather than worrying about the little things.

安装yomen: npm install -g yo

根据项目需要安装相应的generator: npm install -g generator-angular

使用yo：
1.进入自己的项目目录中。
2.执行 yo angular learnangular //learnangular为工程名
3.按照下图进行配置

生成的项目目录如下：

让我们依次查看生成的文件，首先在package.json中：

name:工程名称
devDependencies:开发环境的依赖包
Dependencies:生产环境的依赖包
“^”:只限制主版本号（“~”：限制最小版本号）

app中存放项目文件：

2.2 Bower

bower是twitter的又一个开源项目，使用nodejs开发，用于web包管理。如果越来越多得开源项目都托管在github上，bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包。作为包管理，bower能提供添加新web包，更新web包，删除web包，发布web包功能，管理包依赖。

安装：npm install -g bower
使用：bower install jquery

可以看到生成的文件为：

Bower还提供了多种安装方式：
1.github短语来安装
2.完整的github地址

生成Bower的配置文件：bower.json & bowerrc
1.bower.json:
作用：运行 bower install，即可下载项目需要的库。
生成方法： bower init

注：执行bower install angular
–save-dev，可将其添加如dev-dependencies中

2.bowerrc:一般使用默认设置
一些需要注意的参数说明：

在项目中使用Bower:
在项目中新建APP文件夹，采用传统的方式加入js文件

可以看到，每次添加js文件都需要自己手动去找路径，非常麻烦，因此一般Bower是结合Grunt使用。

2.3 Grunt

Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。

所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。

对Grunt的更加形象的解释参考：
http://yujiangshui.com/grunt-basic-tutorial/

安装：npm install -g grunt-cli

在Yeoman中使用grunt

重点介绍gruntfile.js

module.exports = function (grunt) {

   require('load-grunt-tasks')(grunt);//将目录中的task全部加载进来
  // Configurable paths for the application
  //好处：方便修改
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  };

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Project settings
    yeoman: appConfig,//与上面的appconfig对应
    pkg:grunt.file.readJSON('package.json'),//将package.json中的信息读取进来，用作配置项常量。

    // Watches files for changes and runs tasks based on the changed files
    watch: {//尝试读取同名属性watch
      bower: {//除了option以外的都可以被称作是target
        files: ['bower.json'],
        tasks: ['wiredep']
      },
      js: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
        tasks: ['newer:jshint:all', 'newer:jscs:all'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },
      jsTest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: ['newer:jshint:test', 'newer:jscs:test', 'karma']
      },
      compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass:server', 'postcss:server']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      livereload: {
        options: {//为该目录下的target做的配置
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    }
   })

1.task :grunt将代码压缩，目录清除，创建目录等等操作，称为一个个的task，里面有不同的属性，每一个task可以单独的执行，以其中一个task为例来说明：

//作用：将postcss文件生成css文件，并输出到对应的目录
//执行语句：grunt postcss
//若希望只生成dist目录：grunt postcss:dist
 postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({browsers: ['last 1 version']})
        ]
      },
      server: {
        options: {
          map: true
        },
        //可放多个键值对
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',   //源文件
          dest: '.tmp/styles/'  //目标文件
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.dist/styles/'
        }]
      }
    },

2.同时运行多个task：

//执行语句：grunt serve
 grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }
//指定运行的task
    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'postcss:server',
      'connect:livereload',
      'watch'
    ]);
  });

注：常用开源许可证协议按照宽严排序： MIT>BSD>ISC>Apache>GPL

3.剖析grunt server