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. Excel读取导入数据库碰到的问题

    1.未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序. 下载并安装驱动:http://download.microsoft.com/download/7/0/3/703 ...

  2. UITableView延伸:点击cell关闭键盘,加载不同cell,监听里面的textfeild内容改变

    其实点击cell关闭键盘只要一句话 - () {         cell = [tableView dequeueReusableCellWithIdentifier:){         cell ...

  3. BZOJ 1294 [SCOI2009]围豆豆Bean ——计算几何

    显然我们不可能表示出一台路径,因为实在是太复杂了. 所以我们可以记录一下路径对答案的影响,显然路径对答案影响相同的时候,答案更优,所以我们可以用影响来代替路径. 所以我们考虑状压一下所有的豆子有没有被 ...

  4. [luoguP3317] [SDOI2014]重建(矩阵树定理)

    传送门 为了搞这个题又是学行列式,又是学基尔霍夫矩阵. 矩阵树定理 本题题解 无耻地直接发链接,反正我也是抄的题解.. #include <cstdio> #include <cma ...

  5. P1651 塔 (动态规划)

    题目描述 小明很喜欢摆积木,现在他正在玩的积木是由N个木块组成的,他想用这些木块搭出两座高度相同的塔,一座塔的高度是搭建它的所有木块的高度和,并且一座塔至少要用一个木块.每个木块只能用一次,也可以不用 ...

  6. LVM 类型的 Storage Pool

    LVM 类型的 Storage Pool 不仅一个文件可以分配给客户机作为虚拟磁盘,宿主机上 VG 中的 LV 也可以作为虚拟磁盘分配给虚拟机使用. 不过,LV 由于没有磁盘的 MBR 引导记录,不能 ...

  7. .net面试题汇总一第一篇

    1. 简述 private. protected. public. internal 修饰符的访问权限. private:私有成员,只能在类内部中才可以访问. protected:受保护的,只能在该类 ...

  8. 图表控件Anychart常见问题

    AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...

  9. cannot find package "golang.org/x/crypto/pbkdf2" in any of:

    cannot find package "golang.org/x/crypto/pbkdf2" in any of: /Users/zhou/go/src/mos.market/ ...

  10. HDu1241 DFS搜索

    #include<iostream> #include<cstring> using namespace std; int a[105][105]; int d[8][2]={ ...