前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等,而现在讨论较多的是Grunt。
在平常的工作之中,我们都不断的在重复着做相同的事情,比如说将Sass编译成CSS,检测JavaScript语法,压缩CSS、JavaScript。特别在团队合作开发中,常常会为了各自的习惯而不断的发生麻烦,给开发带来极大的不便。而且前端开发人员在周而复始的做这些相同的,乏味的事情。很多时候我们想工作变得更有意义,更能专注于开发,就希望有一种工具能让我们不去做这些重复而乏味的工作。这就有了Grunt,而这个Grunt让我们编码变得更意义,更开心。
Grunt是一个任务管理器,能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务,例如编译Sass和CoffeeScript,优化图像和验证您的JavaScript代码与JSHint。在过去你可能使用类似CodeKit或Hammer来处理这些任务。我认为这两种应用程序是伟大的(过去广泛的使用他们),但Grunt比他们更优秀,他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。
--------------------------------
Grunt: JavaScript世界的构建工具 -- Grunt中文网
http://www.gruntjs.net/
grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:压缩文件,合并文件,简单语法检查。
GRUNT JavaScript 世界的构建工具
为何要用构建工具?
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
为什么要使用Grunt?
Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上吧。
先看看入门文档:http://www.gruntjs.net/getting-started 吧。
可用的Grunt插件
你所需要的大多数task都已经作为Grunt插件被开发了出来,并且每天都有更多的插件诞生。插件列表页面列出了完整的清单。
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。
提前感受一下 Grunt 吧!
安装 grunt 虽然很简单,更多涉及到如何运行项目。看看下面的演示,这是为项目案例运行 grunt 后的输出。
---------------------------------
gulp.js - 基于流的自动化构建工具。 | gulp.js 中文网
http://www.gulpjs.com.cn/
用自动化构建工具增强你的工作流程!
易于使用
通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
--------------------------------
介紹 | Webpack 中文指南
http://webpackdoc.com/
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
--------------------------------
上面工具都依赖nodejs的命令,所以首先需要安装nodeJS环境,现在windows安装nodeJS直接下载即可:
Index of /download/release/latest/win-x64/
https://nodejs.org/download/release/latest/win-x64/
根据需要下载,下载完成后直接下一步下一步完成,就具有nodeJS环境了
前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍的更多相关文章
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 前端开发:基于cypress的自动化实践
作为一个伪开发,在一个平台项目中负责前端的开发工作,开发框架为vue,本文我会站在前端开发的角度介绍,我是如何使用cypress的. [x] 如何在vue中使用cypress [x] 如何运行cypr ...
- 前端开发教程:使用 CSS3 Transforms 构建圆形导航
在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...
- 从零开始开发一个简易的类vue-cli构建工具
代码地址:https://github.com/cheer4chai/webpack-learning 仿照vue-cli开发这个工具的目的是了解webpack的基本设置,以及vue-cli的工作原理 ...
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- ES6项目构建(babel+gulp+webpack)
(一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...
- Web前端开发规范【HTML/JavaScript/CSS】
前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规 ...
- 前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...
随机推荐
- 替换SearchBar 键盘上的 搜索 按钮
for (UIView *searchBarSubview in [searchBar subviews]) { if ([searchBarSubview conformsToProt ...
- [PCL]keypoint
1. Harris角点 http://www.cnblogs.com/ironstark/p/5064848.html 2. ISS关键点 http://www.cnblogs.com/ironsta ...
- ICP算法使用遇到的问题
这几天在学习数据关联的方法,本来想使用ICP算法进行距离测距数据的配准,但是用的过程中出现问题,配的不准,而且偏差更大了. 红色的和黄色的2维激光点进行ICP配准,但将变换矩阵和黄色进行乘之后偏差更大 ...
- 线程池——JAVA并发编程指南
TPS00-J. 用线程池实现应用在流量暴涨时优雅降级 很多程序都要解决这样一个问题——处理一系列外来的请求.Thread- Per-Message这种设计模式是最简单的并发策略了,它为每一个请求创建 ...
- Function.prototype.bind接口浅析
本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...
- RAC和ASM环境下修改控制文件control file
1,目前控制文件只有一个,为了安全性,增加到3个 SQL> select name from v$controlfile; NAME ------------------------------ ...
- tornado中使用Mako模版
tornado是一个优秀的python的开源web 框架,框架本身的性能确实很好,但是他自带的模版只能说是一般般.关于tornado的详细信息可以直接到管网参考. http://www.tornado ...
- PostgreSQL 一主两备节点(两备节点为同步节点)故障恢复
PostgreSQL 同步复制及故障恢复 10.2.208.10:node1:master 10.2.208.11:node2:standby1 同步 10.2.208.12:node3:stand ...
- 转:windows 7系统安装与配置Tomcat服务器环境
工具/原料 jdk-7u45-windows-x64(我的系统是64位系统,32位的请选x86下载) apache-tomcat-8.0.0-RC5-windows-x64 方法/步骤 下载说明, ...
- nyist 626 intersection set
http://acm.nyist.net/JudgeOnline/problem.php?pid=626 intersection set 时间限制:1000 ms | 内存限制:65535 KB ...