JavaScript全栈开发-构建工具 javascript开发技术大全

在前端开发过程中，经常需合并文件、压缩代码、单元测试、检查语法错误等，需要用手工或不同的工具来完成不同的任务，重复劳动且耗时繁琐，而自动化构建工具可以帮我们自动管理和运行各种任务。可以减少代码构建手工出错的机会，大大增强了开发效率，节省资源。

以下是常见的自动构建工具，可根据需要，选择其中之一进行安装。

* Grunt

* Gulp

1. Grunt

首页：http://gruntjs.com

中文：http://www.gruntjs.net

项目：https://github.com/gruntjs（包括Grunt及其各种模块）

源码：https://github.com/gruntjs/grunt

插件：http://gruntjs.com/plugins

1.1 Grunt安装

Grunt和Grunt插件是通过npm（node package manager）安装管理的。

常见的Grunt模块说明

在项目目录安装Grunt及常见的Grunt插件：

npm install grunt-cli -g

npm install grunt --save-dev# 安装常见的grunt模块

npm install grunt-contrib-clean --save-dev

npm install grunt-contrib-compass --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-imagemin --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

grunt-cli为grunt的命令行界面，主要向Grunt传递Gruntfile配置信息，然后执行Grunt来完成配置文件中指定的任务。

-g：--global，表示全局安装，全局安装后可在任何目录执行grunt命令

--save-dev：表示安装grunt模块时，模块会被自动加到项目的package.json文件的依赖列表中

1.2 Grunt配置文件

模块安装完成后，在项目根目录创建名为Gruntfile.js的配置文件。该配置文件是一个node.js的模块，Grunt运行需要该配置文件。

Grunt常用API

-- grunt对象：Grunt通过将grunt对象赋值给module.exports函数，将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中

-- grunt.initConfig(configObject)：grunt.config.init方法的别名，初始化各模块的配置

-- grunt.loadNpmTasks(pluginName)：加载通过npm安装的Grunt模块

-- grunt.registerTask(taskName, taskList)：注册定义任务

以下为压缩css的任务的配置文件

//Gruntfile.jsmodule.exports = function (grunt) {//初始化配置

grunt.initConfig({

cssmin: { //定义配置对象

minify: { //定义任务目标：压缩

expand: true, //表下面的文件占位符*要扩展成具体文件名

cwd: 'css/', //需要处理文件所在目录

src: ['*.css', '!*.min.css'],//需处理的文件列表（*表任意数量字符，!表示不匹配的情况）

dest: 'css/', //处理后生成的文件所在目录

ext: '.min.css' //处理后生成的文件扩展名

},

combine: { //定义任务目标：合并

files: { //目标文件名，源文件名列表

'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']

}

}

}

});

grunt.loadNpmTasks('grunt-contrib-cssmin'); //加载npm安装的cssmin模块

grunt.registerTask('default', ['cssmin:minify', 'cssmin:combine']); //注册任务

};

配置项属性可在Grunt插件列表http://gruntjs.com/plugins 找到对应的模块页面获取详细的信息。上述安装的其它模块的使用方法可参考插件模块页面的介绍。Grunt内部方法调用的基本流程是 grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()。

1.3 Grunt任务的运行

1) 运行方式1：Grunt命令行方式执行

命令行进到项目根目录，执行grunt命令，命令格式：grunt 模块名:目标名，未指定模块名，目标名将依次执行相应模块及相应目标。

grunt #各模块及目标依次执行

grunt cssmin #执行cssmin模块下所有目标任务

grunt cssmin:minify #执行cssmin模块下的minify目标任务

2) 运行方式2：开发工具IDE方式执行

1> WebStorm

打开项目代码，右键点击 Gruntfile.js 文件 -> 点击Show Grunt Tasks菜单项 -> 出现Grunt任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。（若Grunt列表出现警告，未列出任务，则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径）。

2> SublimeText

SublimeText默认没有安装Grunt，参看SublimeText中插件支持的安装方法在Package Control中安装插件"Grunt"。

安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Grunt命令 -> 完成执行。

2. Gulp

首页：http://gulpjs.com

中文：http://www.gulpjs.com.cn

项目：https://github.com/gulpjs

源码：https://github.com/gulpjs/gulp

插件：http://gulpjs.com/plugins

2.1 Gulp安装

Gulp和Gulp插件是通过npm（node package manager）安装管理的。

常见的Gulp模块说明

在项目目录安装Gulp及常见的Gulp插件：

npm install gulp --global # 安装常见Gulp模块

npm install gulp-cache --save-dev

npm install gulp-concat --save-dev

npm install gulp-imagemin --save-dev

npm install gulp-jshint --save-dev

npm install gulp-livereload --save-dev

npm install gulp-minify-css --save-dev

npm install gulp-notify --save-dev

npm install gulp-plumber --save-dev

npm install gulp-rename --save-dev

npm install gulp-replace --save-dev

npm install gulp-strip-debug --save-dev

npm install gulp-uglify --save-dev

npm install imagemin-pngquant --save-dev

npm install del --save-dev

2.2 Gulp配置

模块安装完成后，在项目根目录下创建 gulpfile.js 代码文件。

Gulp常用API

-- gulp.src(globs [,options])：产生数据流。匹配glob或glob数组的文件，返回Vinyl-fs类型的stream，可通过管道(pipe)传递给插件

-- gulp.dest(path [,options])：作为管道的输出写入文件，同时输出将继续输出。多次调用dest将多次输出到多个目录，目录不存在则创建

-- gulp.task(name [,deps], fn)：指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。

-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb])：监视文件变化执行某些操作，返回可分发change事件的EventEmitter对象。

以下为压缩css的任务的配置文件

//Gulpfile.jsvar gulp = require("gulp"),

mincss = require("gulp-minify-css"),

del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件，返回stream//压缩前先清除文件夹里面的内容

gulp.task("clean", function (callback) {

del(["css/min"], callback);

});

gulp.task("mincss", function () {

return stream

.pipe(gulp.dest("css/min")) //输出文件夹

.pipe(mincss()); //执行压缩

});

gulp.task("default", ["clean"], function () {

gulp.start("mincss");//clear任务执行时，执行压缩。start方法可传入多个任务参数，表依次执行

});

Gulp API的使用方法详见：http://www.gulpjs.com.cn/docs/api。方法调用的基本流程是 gulp.src() -> gulp.dest() -> task()。

2.3 Gulp运行

1) 运行方式1：Gulp命令行方式执行

项目根目录，执行gulp命令，命令格式：gulp <task> <othertask>，未指定任务名，执行所有任务。

2) 运行方式2：开发工具IDE方式执行

1> WebStorm

打开项目代码，右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。（若Gulp列表出现警告，未列出任务，则需要点击警告设置Gulp的NodeJS和Gulp安装路径）

2> SublimeText

SublimeText默认没有安装Gulp，参看SublimeText中插件支持的安装方法在Package Control中安装插件"Gulp"。

安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。

3. 构建工具小结

作为一个工具，核心的需求应该是让开发者花最少的时间学习使用，并为开发者节省更多的时间，解放重复的手工劳动。这就要求一个理想的自动化构建工具应满足 简单，易用，易扩展，易维护，高性能，多平台运行，可靠，可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。

Grunt与Gulp都比较完善的构建工具，但是各自有自己的特点：

Grunt

-- 插件较丰富

-- 易用，常见任务都有插件

-- Grunt及插件的选项较多，使用复杂

Gulp

-- 配置较少，使用简单

-- 利用Node.js流，不需要往磁盘写中间文件，速度更快

-- 易于学习，API较少

推荐阅读：

【JavaScript 教程】入门篇-JavaScript 的基本语法

「JavaScript 教程」数据类型-函数

详解 js 闭包（图文版）

js 中原型和原型链深入理解

面试：JavaScript基础篇