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
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
随机推荐
- MS SQL 监控错误日志的告警信息
SQL Server的错误消息(Error Message)按照消息的严重级别一共划分25个等级,级别越高,表示严重性也越高.但是如果你统计sys.messages,你会发现,实际上只有16(SQL ...
- 为什么基于TCP UDP服务的一些简单服务端口号都是奇数
TCP是有NCP(网络控制协议)派生出来的,NCP是单工的,通信需要两个链接,所以会预留奇偶端口号.当TCP/UDP成为传输层协议,每个程序只是用一个端口号,且使用奇端口号.
- Redmine 插件安装
将对应的插件都复制进redmine的plugins 安装对应所需要的GEMS bundle install --without development test rmagick 执行插件合并 bund ...
- 使用github之前的技能准备
Git的导入 介绍 Git属于分散型版本管理系统,是为版本管理而设计的软件.版本管理就是管理更新的历史记录.它为我们提供了一些在软件开发过程中必不可少的功能,例如记录一款软件添加或更改源代码的过程,回 ...
- python学习笔记-python解释器
刚开始学习python,首先要了解一下python解释器. 什么是python解释器? 编写python代码保存后,我们会得到一个以.py为扩展名的文本文件.要运行此文件,就需要python解释器去执 ...
- mybatic与spring结合的事务管理
原文地址:http://czj4451.iteye.com/blog/2037759 mybatis与spring结合后,事务管理更加方便,这里介绍使用transactionnal的方式,有错的的地方 ...
- 【2016-11-11】【坚持学习】【Day24】【WPF 自定义控件 附加属性 自定义事件】
UserControl ,自定义控件. 这里刚刚想到一个问题.什么时候应该用usercontrol 定义一个控件.什么时候应该重写控件的template和样式,实现新效果. 引用一下人家的话:http ...
- 【2016-10-28】【坚持学习】【Day15】【MongoDB】【初识】
其实公司产品一直有使用mongodb,只不过我一直没有接触这一块,也没有主动的了解.实在说不过去.于是,准备写几个文章,认真学习一下它. 今天花了几个小时学习了入门 定义: 非关系型数据库, NoSQ ...
- Spark的精简安装步骤---陈楠心血总结
1.下载解压 (1)安装Scala-2.10.4并解压 (2)/etc/profile加入PATH路径 (3)source /etc/profile使PATH的配置生效 (4)下载并解压spark-1 ...
- 线程同步以及 yield() wait()和notify()、notifyAll()
1.yield() 该方法与sleep()类似,只是不能由用户指定暂停多长时间,并且yield()方法只能让同优先级的线程有执行的机会. 2.wait()和notify().notifyAll() 这 ...