Grunt简单教程

1.grunt简单介绍

Grunt是一个基于任务的命令行工具。依赖于node.js环境。

它能帮你合并js文件,压缩js文件,验证js。编译less,合并css。还能够配置自己主动任务。单元測试等等,grunt有许多的插件,能够满足你的大部分需求。

2.怎么安装

先介绍一些东西:

npm是node.js的包管理器通过npm能够下载安装nodejs的模块包

cnpm是淘宝 npm镜像,用此取代官方版本号(仅仅读),同步频率眼下为10分钟一次。

安装cnpm方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

经常使用命令:

node -v 版本号

npm -v 版本号

npm list:查看当前文件夹下已安装的node包

npm help:查看帮助命令

npm install <name> -g 

将包安装到全局环境中,在命令行能直接使用

npm update moduleName:更新node模块

npm uninstall moudleName:卸载node模块

npm root:查看当前包的安装路径

npm root -g:查看全局的包的安装路径

假设你之前安装过老的0.3版本号,请先卸载:

npm uninstall -g grunt

安装Grunt命令行(CLI):

npm install -g grunt-cli

注1:-g代表全局安装,Grunt有二个版本号:server端版本号(grunt)和client版本号(grunt-cli)。

注2:安装grunt-cli并不等于安装了grunt!grunt CLI的任务非常easy:调用与Gruntfile在同一文件夹中的grunt。这样带来的优点是。同意你在同一个系统上同一时候安装多个版本号的grunt。而grunt使用模块结构。除了安装命令行界面以外。还要依据须要安装对应的模块。这些模块应该採用局部安装。由于不同项目可能须要同一个模块的不同版本号。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目公布为npm模块。

{
"name": "grunt", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-contrib-watch": "~0.2.0",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-uglify": "~0.1.0",
"grunt-contrib-cssmin": "~0.9.0",
"difflet": "~0.2.3" }
}

devDependencies里面的參数,指定了项目依赖的Grunt和Grunt插件版本号。当中"~0.1.1"代表安装该插件的某个特定版本号,假设仅仅需安装最新版本号,能够改成"*"。

创建新的Grunt项目

cd到项目目录

方式一:建好package.json文件然后运行:

npm install

这时你会发现项目目录中多了个node_modules目录,其里面就是相应的Grunt和Grunt插件。

方式二:自己主动安装

安装最新版的Grunt:

npm install grunt --save-dev

接着安装我们所须要的插件:

npm install grunt-contrib-cssmin --save-dev

注:当中--save-dev,表示将它作为你的项目依赖加入到package.json文件里devDependencies内。假设你要安装指定版本号的Grunt或者Grunt插件。仅仅须要执行npm install grunt@VERSION --save-dev命令,当中VERSION就是你所须要的版本号(指定版本号号就可以)。

配置任务

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee。用来配置或定义任务(task)并载入Grunt插件

module.exports = function(grunt){

	grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
},
dist: {
src: ['src/**/*.js'],//src目录下包含子目录下的全部文件
dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
}
},
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> */\n'
},
//详细任务配置
build: {
src: 'dist/built.js',
dest: 'build/built.min.js'
}
},
cssmin: {
build: {
src: ["src/css/css1.css", "src/css/css2.css"],
dest:"dist/css/cssOut.css"
}
}
});
// 载入提供”uglify”任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认任务
grunt.registerTask('default', ['concat','uglify','mincss']);
}

运行任务

运行配置中全部的任务:

grunt

运行某个特定的任务:

grunt concat

经常使用插件介绍:

grunt-contrib-uglify  压缩js文件

grunt-contrib-concat 合并随意文件

grunt-contrib-jshint 于javascript代码检查(并会给出建议),公布js代码前运行jshint任务,能够避免出现一些低级语法问题

grunt-contrib-mincss  用于css压缩

grunt-contrib-watch 它能监測文件的改动,触发指定任务

grunt-contrib-less less编译

等等

grunt简单教程的更多相关文章

  1. Git和Github简单教程

    原文链接:Git和Github简单教程 网络上关于Git和GitHub的教程不少,但是这些教程有的命令太少不够用,有的命令太多,使得初期学习的时候需要额外花不少时间在一些当前用不到的命令上. 这篇文章 ...

  2. FusionCharts简单教程(三)-----如何自定义图表上的工具提示

    最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...

  3. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

  4. Qt Quick 简单教程

    上一篇<Qt Quick 之 Hello World 图文详解>我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ,这篇 ...

  5. Git和Github简单教程(收藏)

    原文链接:Git和Github简单教程 目录: 零.Git是什么 一.Git的主要功能:版本控制 二.概览 三.Git for Windows软件安装 四.本地Git的使用 五.Github与Git的 ...

  6. mysql安装简单教程(自动安装/配置安装)

    mysql安装简单教程(自动安装/配置安装) 1.1前言: 由于特殊原因,在最近2-3个月里mysql真是安装了无数遍,每次安装都要上网找教程,每个教程基本都不一样,因此还是自己写下来比较好,毕竟自己 ...

  7. 平衡树简单教程及模板(splay, 替罪羊树, 非旋treap)

    原文链接https://www.cnblogs.com/zhouzhendong/p/Balanced-Binary-Tree.html 注意是简单教程,不是入门教程. splay 1. 旋转: 假设 ...

  8. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  9. mockito简单教程

    注:本文来源:sdyy321的<mockito简单教程> 官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/h ...

随机推荐

  1. 初识LiveScript

        The LiveScript Book 邂逅 LiveScript 就像很多现代化的语言一样,LiveScript 使用缩进来表示语句块,使用换行取代分号来表示一个语句的结束 (如果你想要一行 ...

  2. Leetcode 368.最大整除子集

    最大整除子集 给出一个由无重复的正整数组成的集合,找出其中最大的整除子集,子集中任意一对 (Si,Sj) 都要满足:Si % Sj = 0 或 Sj % Si = 0. 如果有多个目标子集,返回其中任 ...

  3. struts2知识系统整理

    1.MVC 和 JSP Model 2 **   a.:M-Model 模型 包含两部分:业务数据和业务处理逻辑  b.V-View 视图:视图(View)的职责是负责显示界面和用户交互(收集用户信息 ...

  4. 【JavaScript 5—基础知识点】:正则表达式(笔记)

    一.总体概览 1.1,什么是正则 又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符 ...

  5. spring配置druid连接池和监控数据库访问性能

    Druid连接池及监控在spring配置如下: <bean id="dataSource" class="com.alibaba.druid.pool.DruidD ...

  6. git 本地保存账号密码

    用ssh连接的项目都不用输账号密码 如果https的话   每次都用输入账号密码   很繁琐 解决方法,在本地的工程文件夹的.git下打开config文件添加: [credential]     he ...

  7. 计算几何 I. 极角

    参考资料 hankcs.com: POJ 1981 Circle and Points 题解 aswmtjdsj: POJ 1981 Circle and Points [定长圆覆盖最多点问题] zx ...

  8. 金鹰dreamweaver视频教程下载地址

    原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] http://download2.gbaopan.com/c188aecb5e524ab2b2a484c061e0 ...

  9. msp430项目编程54

    msp430综合项目---扩展项目四54 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  10. Redis数据结构之整数集合

    整数集合是Redis用于保存整数值的集合抽象数据结构,它可以保存类型为int16_t .int32_t或者int64_t的整数值,并且保证集合中不会出现重复元素. 一.整数集合数据结构定义 参数说明: ...