grunt自动化构建工具
一、什么是grunt?
是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器
二、为什么要用grunt?
自动化。对于反复重复的任务,例如压缩、编译、单元测试等,自动化工具可以减轻你的劳动,简化你的工作
三、如何使用?
1、首先安装nodejs,安装包及源码下载地址:https://nodejs.org/en/download/。
2、安装grunt,需要先将grunt命令行(CLI)安装到全局环境中,
npm install -g grunt-cli
上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
3、一般在项目中需要添加两份文件:package.json 和 Gruntfile.js
package.json 如下:
{
"name": "gruntTest",
"version": "1.0.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0", //检查js语法
"grunt-contrib-uglify": "^2.0.0", //js压缩
"grunt-contrib-watch": "^1.0.0" //监听js文件变动
}
}
Gruntfile.js 如下:
module.exports = function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
uglify:{
bulid:{
expand: true, //启用动态扩张
src:'DemoTmp/js/*.js', //需要压缩的js文件所在路径
//dest:'DemoTmp/js/', //压缩后文件所在路径
ext:'.min.js', //压缩后的文件名
extDot:'first' //扩展文件名开始后第一个点
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); //加载任务插件
grunt.registerTask('default',['uglify']); //默认被执行的任务列表
};
4、以上两个文件配置好后,就可以进行操作了:
1)将命令行的当前目录转到项目根目录下
2)执行 npm install 命令安装项目依赖的库
3)执行 grunt 命令
grunt自动化构建工具的更多相关文章
- Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)
简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...
- NPM、nodeJS安装,grunt自动化构建工具学习总结
一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具-yoman浅谈
如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
随机推荐
- Hive 分组问题
group by 中出现的字段不能再select 后面单独显示,必须配合函数使用 上面中的 ' group by id 总结: Hive不允许直接访问非group by字段: 对于非group by字 ...
- 在CentOS中安装NodeJS
1. 更改软件源 备份默认的软件源文件“CentOS-Base.repo” mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...
- MySQL 更新语句技巧
一. 多表更新 1. 数据准备 mysql> mysql> select goods_id, goods_name,goods_cate from tdb_goods; +-------- ...
- 网络抓包工具-Wireshark学习资料
wireshark一个非常牛逼的网络抓包工具.转载一系列博文 一站式学习Wireshark(一):Wireshark基本用法 一站式学习Wireshark(二):应用Wireshark观察基本网络协议 ...
- 微信公众平台开发——微信授权登录(OAuth2.0)
1.OAuth2.0简介 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户 ...
- android 学习中的一些问题记录 主要是概念问题
一些问题记录 应用程序 res 目录常见的目录有哪些,分别放置什么类型的资源? animator/ 和anim/ 放的都是定义动画的XML文件,两个地方的动画类型不同. color/ XML文件:定义 ...
- 【WPF系列】基础 PasswordBox
参考 How to bind to a PasswordBox in MVVM
- oracle异常(-)
一.概述异常分成三大类:预定义异常.非预定义异常.自定义异常处理方法分为:直接抛出异常.内部块处理异常.游标处理异常 预定义异常:由PL/SQL定义的异常.由于它们已在standard包中预定义了,因 ...
- BZOJ 1096: [ZJOI2007]仓库建设 [斜率优化DP]
1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4201 Solved: 1851[Submit][Stat ...
- UVA11021 Tribles[离散概率 DP]
UVA - 11021 Tribles GRAVITATION, n. “The tendency of all bodies to approach one another with a stren ...