Grunt项目构建-插件学习

听说过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还没整过呐!??

时间: 2024-10-07 04:21:21

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

java,maven项目构建工具学习

maven是一个项目构建工具,maven可以完成项目打包,在线管理依赖包等. maven介绍参考:https://www.runoob.com/maven/maven-tutorial.html maven安装参考:https://blog.csdn.net/qq_42881421/article/details/82900849 maven修改镜像源参考:https://www.runoob.com/maven/maven-repositories.html maven修改默认仓库地址参考:h

grunt项目构建

最近想把项目里添加grunt,说白了就是前端自动化管理,具体配置如下: 用到以下几个部件: grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-jshint grunt-contrib-imagemin 这几个应该是最常用的几个部件,用于我们页面需要后台部署,所以没有用html压缩. 过几天会把文件合并部件加上,减少http请求.再找一下有没有图片合并的部件,百度的F.I.S就整合了图片合并的部件. 干货... Gruntfile.js

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

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

简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的工具,对于初学者来说,就有了一个可以学习.开发.测试的平台. Yeoman 官方的介绍是这样形容的:“Web App的脚手架工具” --- Yeoman的目的是帮助用户更好的启动项目,提供最好的实践和工具使用户保持高生产率. Yeoman提供了一个生成器的生态系统,并提供了一个“Yeoman的工作流

项目构建之maven篇:6.生命周期与插件

项目生命周期 清理 初始化 编译 测试 打包 部署 三套生命周期 1.clean pre-clean 执行一些需要在clean之前完成的工作 clean 移除所有上一次构建生成的文件 post-clean 执行一些需要在clean之后立刻完成的工作 2.compile validate generate-sources process-sources generate-resources process-resources 复制并处理资源文件,至目标目录,准备打包. compile 编译项目的源

Maven学习总结(二)——Maven项目构建过程练习

Maven学习总结(二)——Maven项目构建过程练习 上一篇只是简单介绍了一下maven入门的一些相关知识,这一篇主要是体验一下Maven高度自动化构建项目的过程 一.创建Maven项目 1.1.建立Hello项目 1.首先建立Hello项目,同时建立Maven约定的目录结构和pom.xml文件 Hello | --src | -----main | ----------java | ----------resources | -----test | ---------java | -----

Gulp vs Grunt 前端构建工具对比

Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等.而如今前端提到构建工具会自然想起Grunt.Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理. 在JavaScript的世界里,Grunt.js是基于Node.js的自动化任务运行器.201

maven项目构建

Maven是apache的一个开源项目.是一个用来把源代码构建成可发布的构件的工具. Maven的功能非常强大,可以认为是一个项目管理工具,不仅仅是一个构建工具. Maven本身的核心很小,但是可以在上面扩展出很多的插件.Mven采用的是插件的思想,通过插件的功能扩展出很多的功能.同时Maven采用约定大于配置的思想,在项目中采用了很多约定规则来减少配置.不想ant这样的构建工具需要很多的配置.作为一个项目构建工具,最重要的是管理项目的库和项目之间的依赖关系. 本文将以以下面的例子,来作为学习m

grunt自动化构建工具

一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务,例如压缩.编译.单元测试等,自动化工具可以减轻你的劳动,简化你的工作 三.如何使用? 1.首先安装nodejs,安装包及源码下载地址:https://nodejs.org/en/download/. 2.安装grunt,需要先将grunt命令行(CLI)安装到全局环境中, npm install -