一、什么是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. Ant:build.xml 结构

     Ant build.xml 结构 project target task data property datatype v\:* {behavior:url(#default#VML);} o\:* ...

  2. SQL Server 2008 R2——TRUNCATE TABLE 无法截断表 该表正由 FOREIGN KEY 约束引用

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...

  3. 每天一个linux命令目录

    出处:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html 开始详细系统的学习linux常用命令,坚持每天一个命令,所以这个系列为每 ...

  4. Walle - 瓦力上线部署系统搭建攻略

    背景知识:Walle - 瓦力是一个支持svn.git.多用户.多项目.多环境同时部署的上线部署系统,http://www.oschina.net/news/68610/walle-0-9-2 实验系 ...

  5. NEST与JSON语法对照 一 match与multi_match

    { "query": { "bool": { "must": [ { "multi_match": { "qu ...

  6. 【WPF系列】-TextBox常用知识点

    DataBinding中更新数据源的时机   TextBox .Text 属性的默认 UpdateSourceTrigger 值为 LostFocus.这意味着如果应用程序的 TextBox 包含数据 ...

  7. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

  8. NSURLCache

    属性介绍: //获取当前应用的缓存管理对象 + (NSURLCache *)sharedURLCache; //设置自定义的NSURLCache作为应用缓存管理对象 + (void)setShared ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 检查版本升级、检查登录超时

    当用户都在一个公司内,甚至一个办公室时,喉一下或者跑过去亲自更新一下程序,就可以了,问题就很简单也没多少复杂性,也不怎么考验技术能力.当面对全国10万以上客户端时,问题就来了. 1:有的用户打开系统一 ...

  10. jS字符串大小写转换实现方式

    toLocaleUpperCase 方法:将字符转换为大写 stringVar.tolocaleUpperCase( ) 必选的 stringVar 引用是一个 String 对象,值或文字. //转 ...