前端自动化构建工具Grunt
来源:互联网 发布:谷歌平板nexus10 知乎 编辑:程序博客网 时间:2024/05/30 22:53
一、了解Gurnt
Grunt 是一个基于任务的JavaScript工程命令行构建工具。Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器。
了解Grunt前,首先要准备两件事:
1、了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
2、安装node:进入nodejs官网(https://nodejs.org/),单击INSTALL下载node安装包,默认安装。安装完成后,进入对应目录,会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。
二、安装Grunt
参考Grunt官网http://www.gruntjs.net/安装Grunt:npm install -g grunt-cli
注意,安装grunt-cli并不等于安装了Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的Grunt。
三、简单实用Grunt
一个新的Grunt项目,必须在根目录下要有两个文件:package.json 和 Gruntfile.jspackage.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。
1. npm init命令会创建一个基本的package.json文件。或者手动创建,如下:
2. 安装Grunt和Grunt插件(https://github.com/gruntjs)
向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过:
npm install <module> --save-dev。此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中。
3. grunt --help 命令将列出所有可用的任务
四、简单项目流程示例
清空编译工作区 -> copy源文件到编译工作区 -> 合并文件 -> 压缩文件 -> 加时间戳clean -> copy -> concat -> min -> md5
1. grunt-contrib-clean:Clear files and folders.
2. grunt-contrib-copy:Copy files and folders.
3. grunt-contrib-concat:Concatenate files.
4. grunt-contrib-cssmin:Compress CSS files.
grunt-contrib-uglify:Minify files with UglifyJS.
grunt-contrib-htmlmin:Minify HTML.
5. grunt-filerev:Static asset revisioning through file content hash
第一步:创建package.json
第二步:安装对应插件(加上--save-dev,会在package.json中加上devDependencies依赖)
第三步:创建Gruntfile.js,添加要使用插件配置
五、地址
nodejs官网地址:https://nodejs.org/grunt中文官网地址:http://www.gruntjs.net/
grunt官网插件地址:https://github.com/gruntjs
六、源码
// package.json
//Gruntfile.js
PS:
1. 自己配置的任务名称,不能和插件名称一样,否则会造成无限循环
2. 插件名称,除最外层外,中间层名称可自定义
阅读全文
0 0
- 前端自动化构建工具Grunt
- 【Grunt】前端自动化构建工具
- 前端自动化构建工具Grunt
- grunt 前端自动化构建工具
- javascript前端工具------自动化构建工具Grunt
- grunt自动化构建工具
- 前端自动化工具grunt
- Grunt前端自动化工具
- grunt-beginner 前端自动化工具
- Grunt-beginner前端自动化工具
- 前端自动化工具grunt介绍
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- Gulp.js—比Grunt更易用的前端构建工具-前端自动化
- 一步一步学习安装Grunt前端自动化工具
- 前端自动化工具Grunt的使用
- Grunt自动化web前端开发环境工具
- 前端自动化工具grunt的使用
- Gulp vs Grunt 前端工程构建工具
- Oracle数据库(常用的函数)
- 手机内存应该看ROM还是RAM
- 递归与分治策略-2.8快速排序
- 1082. Read Number in Chinese (25)
- Android 硬件版本问题(M/Q/O/RM)
- 前端自动化构建工具Grunt
- 基于XCP协议分析和理解
- Servlet Cookie技术
- Java中String直接赋值和使用new的区别
- Ajax异步&同步请求
- Struts2框架(一)
- JAVA类加载器原理
- 【win】SVN利用钩子实现代码同步到WEB目录
- Spring5源码解析-Spring框架中的事件和监听器