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
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
随机推荐
- SQLite学习笔记(九)&&pager模块
概述 通过上一篇文章的分析,我们知道了pager模块在整个sqlite中所处的位置.它是sqlite的核心模块,充当了多种重要角色.作为一个事务管理器,它通过并发控制和故障恢复实现事务的ACID特性, ...
- MongoDB学习笔记~为IMongoRepository接口添加了增删改方法,针对官方驱动
回到目录 上一讲说了MongoDB官方驱动的查询功能,这回说一下官方驱动的增删改功能,驱动在升级为2.0后,相应的insert,update和delete都只有了异步版本(或者叫并行版本),这当然也是 ...
- 我心中的MySQL DBA
原文网址链接:http://wangwei007.blog.51cto.com/68019/1718311 MySQL是一个跨平台的开源关系型数据库管理系统,目前MySQL被广泛地应用在Interne ...
- 对B+树与索引在MySQL中的认识
[TOC] 概述 本质:数据库维护某种数据结构以某种方式引用(指向)数据 索引取舍原则:索引的结构组织要尽量减少查找过程中磁盘I/O的存取次数 B树 满足的条件 d为大于1的一个正整数,称为B-Tre ...
- iOS 10 的坑:新机首次安装 app,请求网络权限“是否允许使用数据”(转)
症状 iOS 10 之后,陆陆续续地有用户联系我们,说新机第一次安装.第一次启动的时候,app 首屏一片空白,完全没数据.kill 掉重新打开就好了. 一开始以为是用户网络情况不好,但随着越来越多的用 ...
- vi编辑器怎么设置tab缩进
首先,在命令中输入vim ~/.vimrc 按i进入编辑模式,输入set tabstop=4 按Esc进入命令模式,输入:wq保存退出即可.
- 烂泥:openvpn tun模式下客户端与内网机器通信
本文由秀依林枫提供友情赞助,首发于烂泥行天下 前两篇文章我们介绍了有关openvpn的搭建与配置文件的讲解,这篇文章我们再聊介绍下,在tun模式下openvpn客户端如何与内网机器通信的问题. 一.实 ...
- S3C6410移植apache和php
需要准备的东西: Apache-1.3.39 for linux Php-4.4.8 for linux Ubuntu amd64位 PC机 6410开发板,我用的是友善之臂 交叉编译: 交叉编译呢, ...
- [原]经典bootstrap模态框使用文章
1,Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div ...
- ANSYS17.0详细安装图文教程
ANSYS 17.0是ANSYS的最新版.下面以图文方式详细描述该软件的安装过程. 1 安装前的准备 安装之前需要做的准备工作: 在硬盘上腾出30G的空间来.(视安装模块的多少,完全安装可能需要二十多 ...