前端自动化工具详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_30422457/article/details/81111936

为什么要使用前端构建工具？

自动化！！！！

对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。

当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Grunt

grunt需要package.json文件描述，很多操作都直接通过这个json文件访问

需要Gruntfile.js文件，这是一个入口文件，grunt将从这里开始，实现你的意图。

关于Gruntfile.js

Gruntfile.js是Grunt的配置文件，不同于常见的XML格式，它采用的是JavaScript的代码进行配置。整个Gruntfile.js就是一个符合Node.js标准的JavaScript模块。Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。

所有的代码要包裹在

module.exports = function(grunt) {};

Grunt 有关的主要有三块代码：任务配置代码、插件加载代码、任务注册代码

任务：任务配置代码就是调用插件配置一下要执行的任务和实现的功能

具体的任务配置代码以对象格式放在 grunt.initConfig 函数里面

代码压缩：html压缩：htmlmin css压缩： cssmin js压缩：uglify

wiredep任务：自动引入bower管理的第三方组件的js和css

usemin和useminPrepare：（同属于grunt-usemin组件的task） js和css等静态文件进行合并压缩处理重命名后对应修改html文件的引用

autoprefixer任务：给需要加上厂商前缀的css语句自动加上厂商前缀

modernizr：用来检测用户浏览器是否支持某些html5或css3特性的js库

插件：插件加载代码就是把需要用到的插件加载进来

grunt.loadNpmTasks('grunt-contrib-uglify');

合并文件：grunt-contrib-concat

语法检查：grunt-contrib-jshint

Scss 编译：grunt-contrib-sass

压缩文件：grunt-contrib-uglify

监听文件变动：grunt-contrib-watch

建立本地服务器：grunt-contrib-connect

任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。

grunt.registerTask('task', ['任务配置']);

task 的命名不能与后面的任务配置同名

Grunt的特点和不足：

Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。

1，插件很难遵守单一责任原则（许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作，你可能使用的是 uglify 插件，也有可能使用的是 concat 插件）

2，用插件做一些本来不需要插件来做的事情

3，试图用配置文件完成所有事，结果很混乱

4，落后的流程控制产生了让人头痛的临时文件导致性能滞后

Grunt的优点

1. 简化工作流程，一劳永逸的实现前端的自动化构建、

2. 符合前端发展趋势，推动其他新技术的应用、

3. 配置文件灵活，可利用第三方插件，也可以自行扩展、

4.Grunt 官方提供了一些常见的插件，满足大部分日常工作，而且可靠值得信赖。

Gulp

gulp的特点：

1，使用gulp.js，你的构建脚本是代码，而不是配置文件

2，使用标准库（node.js）来编写脚本

3，插件都很简单，只负责完成一件事，基本都是很短的函数

4，任务都以最大的并发数执行

5，输入输出都是基于流式的

gulp的优点：

gulp是基于Nodejs的自动任务运行器，它能自动化地完成javascript/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

使用Gulp的优势就是利用流的方式进行文件的处理，使用管道（pipe）思想，前一级的输出，直接变成后一级的输入，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

使用Gulp,可以避免浏览器缓存机制，性能优化（文件合并，减少http请求；文件压缩）以及效率提升（自动添加CSS3前缀；代码分析检查）

NPM

NPM的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。npm的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

bower

bower和npm的区别

1、npm（Node Package Manager）是nodejs时代不可或缺的最好的包管理器，现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录，在重新部署之时只需要执行 npm install一行简单的命令，所有相关的依赖就能够自动安装到项目目录下面，并且还能很方便的对不同项目的不同依赖包版本进行良好、统一的管理。

2、Bower的安装和升级全都依赖于NPM，使用类似NPM的方式，对于当前项目进行前端依赖的相关管理。

3、与NPM最大的区别在于，NPM主要运用于Node.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义。

4、npm设计之初就采用了的是嵌套的依赖关系树，这种方式显然对前端不友好；而Bower则采用扁平的依赖关系管理方式，使用上更符合前端开发的使用习惯。

bower 的基础功能：

1.注册模块

每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配

2.文件存储

把文件存储在一个有效的网络地址上,使用的时候可以直接下载到.

3.上传下载

你可以把你的包注册后上传存储，使用的时候可以使用一条命令直接下载到当前项目.

4.依赖分析

它帮我们解决了包与包直接的依赖关系，我们要知道谁依赖谁，还要明确哪个版本依赖哪个版本，当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B