webpack gulp grunt 简单介绍

本文主要是讲下webpack的相关知识点，理论比较多，因为webpack的功能非常强大，说到的也基本都是经常用到的。

这三个工具都属于前端自动化的工具，都是第三方的，并且国内很多大型团队也都有自己成熟的自动化部署工具，如百度有FIS,腾讯有Modjs等；

下面简单说下他们的区别：

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。

gulp.js - 基于流的自动化构建工具，也就是基于nodejs stream基础实现的。

　　易于使用
　　通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
　　构建快速
　　利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载，公共代码提取，通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等，也就是说webpack不同于gulp grunt 这两个是纯工具，webpack最大的特点就是自身支持模块化儿，任何资源都可以作为模块来引入。

大家对这几个工具的执行原理有兴趣的也可以自己研究下，相信会有精彩的发现。。今天就是跟大家简单的介绍下概念的东西，具体的配置咱们以后也会说道，到时候会具体说webpack的配置。

转载于:https://www.cnblogs.com/crith/p/6934749.html

webpack gulp grunt 简单介绍相关推荐

Webpack 的简单介绍
本文介绍了一些 webpack 的核心概念以及一些概念术语,并对核心配置做了一些简单的用法讲解.建议刚刚接触 Webpack 的朋友可以先了解一下.想了解更多 Webpack 使用以及配置的话可以参考 ...
Gulp,grunt,seajs/require和browserify/webpack的区别
Gulp / Grunt 是构建工具,可以配合各种平台上的插件做js压缩,各种css编译,页面自动刷新,检查语法等,替代手工实现自动化开发 seajs/require和browserify/webpa ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
认识webpack、理解webpack与grunt、glup的核心区别01
认识webpack 什么是webpack 官方解释 At its core,webpack is a static module bundler for modern JavaScript appli ...
简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持
[原文发表地址]Introducing Gulp, Grunt, Bower, and npm support for Visual Studio Web 开发,特别是前端 Web 开发,正迅速变得像 ...
gulp plugins 插件介绍
原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了预祝大家新春快乐 [ ]~(￣▽￣) ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

webpack gulp grunt 简单介绍

webpack gulp grunt 简单介绍相关推荐

最新文章

热门文章