前端开发自动化工作流工具,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环境了

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

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

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

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

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  3. 前端开发:基于cypress的自动化实践

    作为一个伪开发,在一个平台项目中负责前端的开发工作,开发框架为vue,本文我会站在前端开发的角度介绍,我是如何使用cypress的. [x] 如何在vue中使用cypress [x] 如何运行cypr ...

  4. 前端开发教程:使用 CSS3 Transforms 构建圆形导航

    在本教程中我将告诉你如何使用 CSS 变换来创建圆形导航.教程逐一讲解实现这个样式将要涉及一些基本的数学知识并配合 CSS 变换来创建这些样式.不过不用担心,这里用到的数学知识真的是很简单的.教程使用 ...

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

     Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测 ...

  6. 从零开始开发一个简易的类vue-cli构建工具

    代码地址:https://github.com/cheer4chai/webpack-learning 仿照vue-cli开发这个工具的目的是了解webpack的基本设置,以及vue-cli的工作原理 ...

  7. grunt,gulp,webpack前端打包工具的特性

    1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...

  8. ES6项目构建(babel+gulp+webpack)

    (一)基础架构 (二)任务自动化(gulp) (三)编译工具(babel,webpack) (四)代码实现 一.基础构架 1.app : 放置前端代码 css : css文件 js : js文件 cl ...

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

    前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规 ...

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

    如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

随机推荐

  1. iOS Block浅析

    Block 的使用有两种:1.独立Block .2.内联Block .   <一>独立Block 使用方式   一.定义一个Block Object,并调用.   1.定义   // 定义 ...

  2. ucenter 显示通信成功的条件

    应用的主 URL+/api/uc.php?code= 如果这个页面返回1,则通信成功,也就是说,uc.php是通信成功里重要的一环 事实上,我还没有通信成功,我只是写了一个1在欺骗服务端

  3. 学习JAVA 安装

    下载 JDK      Tomcat9     Apache     mod_jk 1.安装JDK 这里就说配置环境变量 添加环境变量 JAVA_HOME(就是jdk的安装路径) CLASSPATH( ...

  4. Windows Server 2008 R2 域控修改域用户密码复杂性

    1.进入”本地安全策略”进行管理时,发现密码策略已经被锁定,无法更改: 2.在此情况下要改密码策略的过程如下, 进入组策略管理: 3.右键点击/编辑Default Domain Policy: 4.在 ...

  5. svn合并

    1.先去 aone里我的变更 里 重建 新分支 相当于重主干上拉代码下来2.然后再去 原来的分支里 swich切换到新分支3.在原来的分支里 merge 到新分支的url4.选择最早的 version ...

  6. Wcf Restful Service服务搭建

    目的 使用Wcf(C#)搭建一个Restful Service 背景 最近接到一个项目,客户要求使用Restful 方式接收到数据,并对数据提供对数据的统计显示功能,简单是简单,但必须要使用Restf ...

  7. Leetcode: Range Sum Query - Mutable && Summary: Segment Tree

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  8. Leetcode: Create Maximum Number

    Given two arrays of length m and n with digits 0-9 representing two numbers. Create the maximum numb ...

  9. JAVA-环境部分

    JAVA环境 1.jdk 1.从Oracle网站下载安装包(32位.64位) 2.安装目录不用中文或空格 3.配置环境变量 1作用:提供jdk存放位置信息 2系统环境变量 1增加-JAVA_HOME= ...

  10. C++如何通过一个响应事件接受多个控件消息

    在空的Form里加个Button,写入void __fastcall TForm1::Button1Click(TObject *Sender){ for (long k=0; k<5; k++ ...