听说过Grunt也有两年了,用了也有两年了,然而都是在别人搭好的架子上做开发,当想要对前端工程化整体把控时就一脸懵逼了!

Grunt是什么?

Grunt是一套web前端工程化构建工具。(ps:关于Grunt的好处及安装网上教程一大堆,这里就不熬述了)

为什么说Grunt是一『套』工具呢,因为它提供了丰富的官方插件和第三方插件供开发者使用,开发者可根据项目需求灵活引用适合的插件,从而实现前端工程自动化的整体构建。

Grunt和Grunt插件都基于nodeJs环境运行,Grunt的插件是基于npm来管理。这里还是不讲安装,只针对现在所做的项目中涉及到的Grunt插件做功能简单介绍,对一个完整工程都需要哪些Grunt插件做初印象的概述。

1.babel-preset-es2015

功能:将es6|es2015规范的语法转化为es5规范。

2.body-parser

功能:body-parser进行post参数的解析,最常用的是其中的json和urlencoded的parser,可分别对以JSON格式的post参数和urlencoeded的post参数进行解析,均可获得一个JSON化的req.body。

3.express

功能:一个基于node平台的开发框架。

Web应用:Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

API:丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。

性能:Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能。

4.grunt

功能:Web前端工程化构建的主体。

5.grunt-autoprefixer

功能:解析CSS文件并且添加浏览器前缀到CSS规则里,Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀。

6.grunt-babel

功能:可以在项目中使用下一代规范编写js代码,babel会帮你自动转换成当代浏览器支持的js规范代码。

7.grunt-cli

功能:grunt的命令行接口。

8.grunt-concurrent

功能:并发执行多个任务,可以显著改善多个负责任务构建的耗时。

9.grunt-connect-proxy

功能:解决开发时的跨域问题,因为开发是前后分离的模式,前端调用后端接口时不在一个服务器会产生跨域问题,但又不能采用JsonP和CORS的方式解决,因为项目发布上线后就是同域了,所以proxy提供了一个HTTP代理中间件实现连接。

10.grunt-contrib-clean

功能:做清洁工作,不然会残留很多没有用的文件。

11.grunt-contrib-connect

功能:在本地模拟一个web server。用来充当一个静态文件服务器,本身集成了livereload功能 。

12.grunt-contrib-copy

功能:复制文件和文件夹。

13.grunt-contrib-cssmin

功能:css压缩合并。

14.grunt-contrib-jshint

功能:jshint用于javascript代码检查(并会给出建议),发布js代码前执行jshint任务,可以避免出现一些低级语法问题。

15.grunt-contrib-less

功能:将less编译成css。

16.grunt-contrib-requirejs

功能:合并requireJS管理的文件

17.grunt-contrib-stylus

功能:将stylus编译成css。

18.grunt-contrib-uglify

功能:js代码压缩

19.grunt-contrib-watch

功能:预先设定一个监听任务,用来监控文件的修改|增加|删除,然后自动运行grunt任务,省去一遍遍手动执行Grunt命令。

20.grunt-newer

功能:是一个优化构建的插件,做到文件更改后,增量更新,而不是对所有的文件去执行任务task。作用是处理上方watch的毛病,让watch在监听到某个文件变动时,仅仅对变动的文件进行事务处理。

21.grunt-replace

功能:保持原有目录结构去替换文件。

22.grunt-rev

功能:就是 files 里的指定的文件都会被修改文件名,文件名前加入 md5 字符串。

23.grunt-svgmin

功能:压缩svg。

24.jshint-stylish

功能:高亮标记JsHint的检查结果。

25.load-grunt-tasks

功能:它会自动读取并加载项目 packge.json 文件中 devDependencies 配置下以grunt-* 开头的依赖库。免去手写N多个loadNpmTasks繁琐工作。

26.time-grunt

功能:可用来显示每一个任务所花的时间和百分比。

花了半天时间将现在项目中用到的Grunt插件列出,对每个插件完成的工作有了一个初印象,每个插件的具体使用方法还得到官网https://www.npmjs.com/查阅具体示例,插件间的协同工作还需要自己在实践中学习和摸索,也觉得现有的构建尚有可完善的空间,路漫漫好好学习吧!gulp和webpack还没整过呐!

Grunt项目构建-插件学习的更多相关文章

  1. NPM、nodeJS安装,grunt自动化构建工具学习总结

    一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...

  2. grunt项目构建工具

    JS项目构建工具Grunt实践 一:下面来介绍下如何用grunt合并,压缩js文件.    大概步骤有如下:     1. 新建文件夹相对应的项目 比如文件名叫:gruntJs      2. 新建文 ...

  3. springboot2.0入门(二)-- 基础项目构建+插件的使用

    一.idea中新建第一个HelloWorld项目 点击next: 下一步 在这里可以选择我们需要依赖的第三方软件类库,包括spring-boot-web,mysql驱动,mybatis等.我们这里暂时 ...

  4. grunt项目构建

    最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下: 用到以下几个部件: grunt-contrib-cssmin grunt-contrib-uglify grunt-contri ...

  5. IDEA JSP项目构建及学习心得

    近期学习的东西比较杂乱,导致了很多东西都有些忘却.在这里记录一份心得. 简而言之JSP也就是Java代码在页面上的一种呈现方式,用于Web项目的前台展示. 在这里不做过多的阐述. MVC设计模式,Se ...

  6. Gradle项目构建工具学习笔记(持续更新中。。。)

    1.gradle的安装 1)从官网下载gradle,然后解压 2)在系统环境变量新建GRADLE_HOME 3)将%GRADLE_HOME%\bin加入PATH中 2.验证是否安装成功 gradle ...

  7. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  8. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  9. React学习笔记---项目构建

    简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...

随机推荐

  1. Android 用 res 中文件名获取资源 id 的方法

    res 中我们可能会放很多图片和音频视频等.它们放在 R.drawable, R.raw 下面. 有一种情况是,比如我有一个数据库保存项目中声音的一些信息.声音的 id 就很难保存.因为我们不能把 R ...

  2. OI数学 简单学习笔记

    基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. PART1 数论部分 最大公约数 对于正整数x,y,最大的能同时整除它们的数称为最大公约数 常用的:\(lcm(x,y)=xy\ ...

  3. selenium alert JS弹窗问题处理

    弹窗一般分为三种类型: 1.警告消息框(alert) 警告消息框提供了一个"确定"按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说用户必须先关闭该消息框然后才能继续进行操 ...

  4. 936. Stamping The Sequence

    You want to form a target string of lowercase letters. At the beginning, your sequence is target.len ...

  5. IE8引入JavaScript

    错误写法 : <script type="application/javascript"> 正确写法     <script type="text/ja ...

  6. secureCRT颜色方案设置

    按照如下设置后vim编辑会有如下颜色提示

  7. ibatis遍历数组:ParameterObject or property was not a Collection, Array or Iterator.

    这个问题在使用ibatis的<iterate></iterate>时出现的,很简单,但是蛋疼了很久,记下来 首先从错误提示看,明显意思是你给出ibatis的参数不对路,人家不认 ...

  8. Tutorial 01 4,5题

    .任务四: 程序设计思想:利用Math.random()产生一个char类型的字符,再利用for循环是他们相加,最后将他们放在一个消息框中输出.   程序流程图:   源程序:           p ...

  9. Oracle中-事务-序列-视图-数据类型笔记

    事务(Transaction) 事务(Transaction)是一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位,是数据库环境中的逻辑工作单位. 事务是为了保证数据库的完整性 在o ...

  10. 读取Excel表格日期类型数据的时候

    用POI读取Excel数据:(版本号:POI3.7) 1.读取Excel 2.Excel数据处理: Excel存储日期.时间均以数值类型进行存储,读取时POI先判断是是否是数值类型,再进行判断转化 1 ...