前端开发自动化工作流工具: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直接下载即可:

https://nodejs.org/en/

Index of /download/release/latest/win-x64/
https://nodejs.org/download/release/latest/win-x64/
根据需要下载,下载完成后直接下一步下一步完成,就具有nodeJS环境了

来自:http://www.cnblogs.com/zdz8207/p/js-autotools-grunt-gulp-webpack.html

时间: 2024-08-04 14:13:02

前端开发自动化工作流工具:JavaScript自动化构建工具grunt、gulp、webpack介绍的相关文章

听说优秀的Web前端开发工程师都会用这几个工具!

Web前端入行门槛低.薪资待遇高.市场需求大,是很多人进入IT行业的首选语言.工欲善其身必先利器,作为初学前端行业的小白,如果知道一些好用的软件工具可以帮助他们更好的工作.下面,就给大家分享Web前端开发工程师常用的工具. 1.Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式.表单.buttons.表格.网格系统等等. 2.Foundation Foundation是一个易用.强

前端开发:面向对象与javascript中的面向对象实现(一)

前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“找不到对象!”,他:“就你那样也能找得到对象?”.我一脸黑线...... 废话不多说,今天博主要跟大家聊的是<面向对象与javascript中的面向对象实现>”. 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的影响,单单是自己的念想受到了一定得局限,想法不能够像平地而起的高楼大厦建成一样.可是那大楼也是有烂尾的呀,我觉得最重要的还是外在环境与个人观念的先决条件,决定了拖延症的症状的好坏,有那么一些人,它也有拖延症,但是它在拖的中间,想的更多,看的更远.事情在做的时候更加有条不紊,这拖延症这样看来,它也是好

原生 js前端路由系统实现3之代码 构建工具 和 querystring功能

构建 目前前端构建工具流行的是 grunk.js 功能是大而全,但往往大而全的东西为了多样性 需要做额外的配置  我还是想要有一个专门为自己特性项目而生构建工具 我不想加载第三方的node模块,也不想写配置 ,想要的功能也很简单只是根据文件名字进行合并 build.js 名字规则: a-b-c.js 或者 a-b-c.txt a代表文件合并的顺序(这个顺序跟文件显示的顺序一致) 第一固定为0 最后固定为e  b代表合并后的文件名字  c代表自己的文件名字 以下代码会 寻找当前目录下src目录中的

JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架

 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器. 安装 Grunt 推荐 Windows 用户使用 Git Shell 来进行命令行操作.安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell. GitHub for Windows 下载地址:http://windows.github.com Grunt

Web前端开发规范【HTML/JavaScript/CSS】

前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见.如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是 bug.早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误.只要开发者们能够保证源代码源文件都严格遵循规范,那接下去所使用的混淆.压缩和编译工具则可投其所好不尽相同. 要

WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果

想必大家都玩过网页游戏吧.随着HTML5的普及,浏览器+云端的web app成为了未来的趋势.很多效果都离不开JavaScript.所以说要想进行web开发,JavaScript一定得学好. 那网页游戏中是怎么实现人物的移动效果呢,今天分享一个很基础的简单方法. 效果图如下:点击上边的按钮,暴走小人开始向右移动. HTML+CSS部分非常简单.就不多说了.需要注意的是图片要使用绝对定位. 那么怎么让图片向右动起来呢? 由于图片有position属性,那么我们只需要改变它的属性值就可以了.比如说我

前端自动化构建工具-yoman浅谈

如今随着前端技术的飞速发展,前端项目也变得越来越复杂.快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求.当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间.既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀.嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一个前端构

gulp——基于流的自动化构建工具

目录 gulp简介 gulp API gulp常用任务 gulp的使用 4.1 gulp安装 4.2 创建gulpfile.js 4.3 运行gulp 延伸阅读 gulp简介 gulp.js是一个前端自动化构建工具,前端开发者可以使用它在项目开发过程中自动执行常见任务. gulp.js是基于流(stream)操作的,直接将上一步的输出通过管道(pipe)输入到下一步,可以快速构建项目并减少频繁的IO操作. 参考: 英文官网:http://gulpjs.com/ 中文官网:http://www.g

前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !important;} 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(