Grunt和前端工程化实践

Grunt工具介绍

安装

运行项目我们需要grunt-cli和yeoman和yo的一个webapp生成器，如果你的系统中已经安装npm则只需要：

1
2
3
npm install -g grunt-cli
npm install -g yo
/* npm install -g generator-webapp */

然后开始你的grunt之旅吧~

Grunt配置

Grunt的配置项在根目录的gruntfile.js下。
以sass为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Compiles Sass to CSS and generates necessary files if requested
sass: {
  options: {
    loadPath: 'bower_components'
  },
  dist: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: 'dist/styles',
      ext: '.css'
    }]
  },
  server: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  }
}

里面配置了import源文件地址loadPath，文件源文件地址cwd和目的地址dest等等。
可以通过运行一下代码进行编译。

1
grunt sass

Grunt压缩合并小案例

压缩合并一些js应该算是最被需要的功能之一了，用Grunt来实现也尤为简单
首先需要安装grunt-contrib-concat和grunt-contrib-uglify插件。
然后按以下代码配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    },
    uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat', 'uglify']);
}

Zepto/underscore/backbone就打包成了观众们喜闻乐见的libs.js和压缩版libs.min.js啦。

当然咯，Grunt还有很多插件可以实现更多更强大的功能（比如单元测试），这些就在实践中出真知吧。