一、什么是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. Mysql存储过程和函数区别介绍

    存储过程是用户定义的一系列sql语句的集合,涉及特定表或其它对象的任务,用户可以调用存储过程,而函数通常是数据库已定义的方法,它接收参数并返回某种类型的值并且不涉及特定用户表. 存储过程和函数存在以下 ...

  2. apache+mysql+php的环境配置

    一 配置前的准备 1 先设置环境变量(win7的) win10 二 配置apache 我用EditPlus打开httpd.conf LoadModule php5_module  "c:/w ...

  3. 《java JDK7 学习笔记》之Collection

    一.使用Collection 收集对象 1.认识Collection架构 Java SE提供了满足各种需求的API,在使用这些API前,建议先了解其继承与接口操作架构,才能了解何时使用哪个类,以及类之 ...

  4. sql server之ROW_NUMBER() OVER()取每组的第N行数据

    先看个例子: document_id card_holder_id created_date document_type_id 1 1 2015-7-1 1 2 4 2015-7-2 1 3 4 20 ...

  5. laravel5源码讲解整理

    来源:http://yuez.me/laravel-yuan-ma-jie-du/?utm_source=tuicool&utm_medium=referral 目录 入口文件 index.p ...

  6. shell中各种括号的作用()、(())、[]、[[]]、{}

    一.小括号,圆括号() 1.单小括号 ()    ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...

  7. php基础教程

    PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言. PHP Hypertext Preprocessor 什么是 PHP 文件? PHP 文件能够包含文本.HTML.CSS 以及 PHP 代 ...

  8. win7+ubuntu双系统 重装win7后grub修复

    问题:之前安装的是win7+ubuntu双系统,重装win7后启动选项没有了,直接进入的是win7系统,无法进入ubuntu系统了. 解决办法:我们需要修复grub,将ubuntu系统重新挂载一下,具 ...

  9. Linux下5种IO模型的小结

    概述 接触网络编程,我们时常会与各种与IO相关的概念打交道:同步(Synchronous).异步(ASynchronous).阻塞(blocking)和非阻塞(non-blocking).关于概念的区 ...

  10. <<一种基于δ函数的图象边缘检测算法>>一文算法的实现。

    原始论文下载: 一种基于δ函数的图象边缘检测算法. 这篇论文读起来感觉不像现在的很多论文,废话一大堆,而是直入主题,反倒使人觉得文章的前后跳跃有点大,不过算法的原理已经讲的清晰了.     一.原理 ...