一、什么是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自动化构建工具的更多相关文章

  1. Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)

    简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...

  2. NPM、nodeJS安装,grunt自动化构建工具学习总结

    一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...

  3. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  4. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  5. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  6. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  7. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  8. 前端自动化构建工具-yoman浅谈

    如今随着前端技术的飞速发展,前端项目也变得越来越复杂. 快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求. 当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的 ...

  9. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

随机推荐

  1. 如何查看Windows服务器运行了多长时间

    前言:有时候管理.维护Windows服务器需要定期重启服务器(为什么需要重启,你懂的),但是这个"定期"有时候会受很多因素影响,例如某台服务器忘了重启:某台服务器那个时间段业务繁忙 ...

  2. WPF中,Combox的SelectedItem属性绑定成功后,未能默认显示上一次选择的结果。

    问题描述: Combox中,设定了绑定对象,但是在第一次进入时却没有显示上次选中的项.      1)查看SelectedItem对应绑定的值,也是有的(启动时,读取上次设置的结果,来初始化界面). ...

  3. 如何查看MapReduce执行的程序中的输出日志

    我们开发程序的时候,好多人都喜欢用sysout输出内容来查看运行情况.但是在MR程序里写了之后,却不知道去哪里查找,可以参考这篇文章. 第一种方法,我们可以在MapReduce任务查看页面找到这些日志 ...

  4. YARN DistributedShell源码分析与修改

    YARN DistributedShell源码分析与修改 YARN版本:2.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述 2 YARN Distrib ...

  5. Ubuntu下的生活--安装

    概要 整个安装过程是通过离线包安装,而非在线安装. 目录 JDK安装与配置 Eclipse安装与配置 Apache安装与配置 MySQL的安装 JDK安装与配置 版本:jdk-7u71-linux-i ...

  6. awk-实践

    实际中遇到的问题 字符串截取函数 substr #!/usr/bin/awk #author:zhaoyingnan #filename:substr.awk #substr 函数 #|awk -f ...

  7. 推荐一些python Beautiful Soup学习网址

    前言:这几天忙着写分析报告,实在没精力去研究django,虽然抽时间去看了几遍中文文档,还是等实际实践后写几篇操作文章吧! 正文:以下是本人前段时间学习bs4库找的一些网址,在学习的可以参考下,有点多 ...

  8. 【小白的CFD之旅】10 敲门实例

    按黄师姐的说法,做好第一个案例很重要.第一个案例既可以帮助理解CFD的工作流程,还可以帮助熟悉软件的操作界面. 黄师姐推荐的入门案例来自于ANSYS官方提供的培训教程,是一个关于交叉管内流动混合的案例 ...

  9. C# Regex实例

    regex1 @"w*(?<Rawsize>\d*x\d*x\d*)\D*(?<RawResolution>(\d*p\d*x*){0,3})_\w*" 测 ...

  10. 关于Finereport移动端报表二次开发的两个小例子

    例1:刷新页面 1. 问题描述 A超链至B填报,B提交数据后返回A时,A自动刷新显示新的数据. 2. 解决方案 1. contentPane.setAppearRefresh();  //在A的加载结 ...