前端开发集成方案

在前端开发过程中，我们也许都会遇到这样的场景：

  • 有新项目了？A: 赶紧搭起开发环境; B:去xx项目那边拷一份过来改改吧；
  • 去哪下jquery 1.9.1版本啊？官网找半天没找着;
  • 代码里面写多了个逗号，导致ie报错了？赶紧人肉查一下；
  • 项目要上线了？赶紧想办法合并、压缩、加个版本号；
  • …

诸如此类的问题，老在做重复工作，太枯燥了…

come on，别忘了我们是程序员，重复的工作应该交给程序来干！

我们需要一种自动化的前端开发集成方案！

那么，前端开发集成方案应该具备什么功能呢？在我看来，它需要以下技能：

  • 一个脚手架，用来自动生成项目的基础结构、生成一些基础代码等等。
  • 一个build工具，用来执行各项自动化任务，比如语法检查、合并、压缩等
  • 一个包管理器，用来导入一些基础库等

基于以上需求，我找到了一套叫yeoman的解决方案，它包括了三方面：

  • yo：脚手架工具
  • bower：前端资源管理器
  • grunt：任务型build工具

以上三个工具是独立维护的，它们可以很好地工作在一起，组成一套完整的前端开发集成方案。

yo脚手架

yo是一个脚手架工具，安装它：

1
npm install -g yo

yo可以生成多种类型的项目/代码，但这需要依赖于generators，比如我们想生成一个web应用，我们需要先安装一下generator-webapp：

1
npm install -g generator-webapp

安装完generator后，我们就可以这样新建一个web应用：

1
yo webapp

执行完以上命令后，yo会自动生成一些基础目录/代码，还会使用npm自动安装依赖以及使用bower导入前端基础库。

如果你想找其他的generator，你可以这样：

1
npm search yeoman-generator

你可以得到一大堆开源的generator。当然你也可以自定义generator，建立一套自己的基础项目库，以后在新项目中，分分钟就可以完成基础环境搭建！

如何自定义generator，请看这里>>。

bower

bower是一个前端资源包管理器，安装它：

1
npm install -g bower

bower是twitter开发的一个包管理器，它可以用来管理前端资源，让前端资源的使用更加容易。

假如我们现在想使用jquery，怎么用bower来导入到项目中呢？

我们可以先查询一下：

1
bower search jquery

通过查询，我们知道jquery就是它的包名称，这时，我们就这样来导入到项目中：

1
bower install jquery

这样就完成了基础库导入，但是导入的jquery版本号太新了：2.1.0（这个版本不适合web开发，它貌似不兼容ie了）。

这可能并不是我们想要的，我们想要一个合适的版本号，我们想知道jquery有多少版本可供选择：

1
bower info jquery

通过以上命令，我们可以找到好多jquery版本，我们选择一个我们常用的版本，比如1.9.1：

1
bower install jquery#1.9.1

当然在更换版本的时候，我们需要先删掉之前安装的版本（否则会提示版本冲突，bower会让我们选择其中一个）：

1
bower prune jquery

bower通过一个叫bower.json的文件来管理资源的，它还有另外一个配置文件.bowerrc文件，用来配置资源的存放路径等。

更多用法，可以参考官网文档。

grunt

grunt是目前社区很火的一个build工具，它可以通过配置一系列任务来部署、预览、测试一个项目，安装它：

1
npm install -g grunt-cli

上面只是安装了grunt命令，还没安装Grunt Task Runner，需要到项目根目录上再安装一下Grunt Library：

1
npm install grunt --save-dev

运行grunt时，它会通过require方法来找到Grunt Library，然后读取Gruntfile配置文件执行指定的任务。

使用grunt时，需要有两个必不可少的配置文件：

  • package.json
  • gruntfile.js

项目根目录下，必须要有这两文件。

通常我们可以通过上文介绍的yo来自动生成以上两个文件（文件中包含一些常用的配置），比如：

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
26
27
28
29
30
31
32
// package.json example:
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

// gruntfile.js example:
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

接下来就是要寻找或者自定义gruntplugins：

  • 这里可以查，当然也可以去github上找。
  • 自定义gruntplugin可以参考这里。

找到一个合适的plugin后，可以这么引用：

1
npm install pluginname --save-dev

安装完plugin之后，就需要到gruntfile.js中做一些配置了，具体配置参见各个plugin的文档。

一切就绪后，执行相关任务就ok了！

小结

有了此类前端开发集成方案，开发效率肯定会提高很多！