grunt简单教程
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简单教程的更多相关文章
- Git和Github简单教程
原文链接:Git和Github简单教程 网络上关于Git和GitHub的教程不少,但是这些教程有的命令太少不够用,有的命令太多,使得初期学习的时候需要额外花不少时间在一些当前用不到的命令上. 这篇文章 ...
- FusionCharts简单教程(三)-----如何自定义图表上的工具提示
最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- Qt Quick 简单教程
上一篇<Qt Quick 之 Hello World 图文详解>我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ,这篇 ...
- Git和Github简单教程(收藏)
原文链接:Git和Github简单教程 目录: 零.Git是什么 一.Git的主要功能:版本控制 二.概览 三.Git for Windows软件安装 四.本地Git的使用 五.Github与Git的 ...
- mysql安装简单教程(自动安装/配置安装)
mysql安装简单教程(自动安装/配置安装) 1.1前言: 由于特殊原因,在最近2-3个月里mysql真是安装了无数遍,每次安装都要上网找教程,每个教程基本都不一样,因此还是自己写下来比较好,毕竟自己 ...
- 平衡树简单教程及模板(splay, 替罪羊树, 非旋treap)
原文链接https://www.cnblogs.com/zhouzhendong/p/Balanced-Binary-Tree.html 注意是简单教程,不是入门教程. splay 1. 旋转: 假设 ...
- LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
- mockito简单教程
注:本文来源:sdyy321的<mockito简单教程> 官网: http://mockito.org API文档:http://docs.mockito.googlecode.com/h ...
随机推荐
- 用docker弹性部署自己的服务
很久不看docker的东西了,之前了解的一些基本命令都忘得差不多了,适逢工作需要,再来复习巩固下.今天想完成的是:借助docker不部署下自己的服务. 环境准备 都说“巧妇难为无米之炊”,所以还是需要 ...
- BZOJ 3925 [Zjoi2015]地震后的幻想乡 ——期望DP
我们只需要考虑$\sum F(x)P(x)$的和, $F(x)$表示第x大边的期望,$P(x)$表示最大为x的概率. 经过一番化简得到$ans=\frac{\sum T(x-1)}{m+1}$ 所以就 ...
- Win7开启SNMP服务
通过SNMP监控Windows主机需要在被监控的服务器上安装简单网络管理协议(SNMP)的Windows组件,以Windows 7系统为例: 首先,在控制面板中找到“卸载程序”: 在弹出的窗口中单击“ ...
- 【2017.12.18】Dijkstra专题
先友情提示一下,作者很早就会这个算法了,只不过这么久以来没怎么写过博客.现在正在学习它的拓展,干脆就把这个算法相关的内容整个敲一遍吧!本章把迪杰斯特拉从基础到拓展全都说一遍咯. 下面是优先队列(堆)优 ...
- Maven常用参数及其说明【转:http://blog.csdn.net/wangjunjun2008/article/details/18982089】
Maven常用参数及其说明 -h,--help Display help information-am,--also-make ...
- 连通 OR 不连通(NOJ 1044)
比赛描述 给定一个无向图,一共n个点,请编写一个程序实现两种操作: D x y 从原图中删除连接x,y节点的边. Q x y 询问x,y节点是否连通 输入 第一行两个数n,m(5<=n<= ...
- 标准C程序设计七---25
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- shell按日期自动切割nginx日志脚本
shell按日期自动切割nginx日志脚本 参考:自学it网 http://www.zixue.it/. #nginx日志切割脚本 #author:ce #!/bin/bash #设置日志文件存放目录 ...
- Unity3D 对象池思想 在游戏开发中的运用
分类:U3D 1.在王者荣耀中,每30秒小兵会出现一波,出现之后会被敌方玩家或敌方小兵销毁,一局游戏下来,小兵会被创建多次,同时也会被销毁,在游戏中,这种频繁的创建和销毁游戏对象是很损耗性能的.在游戏 ...
- webstorm调试(一)提示css未使用的选择器Selector is never used
一.css未使用的选择器Selector 今天写vue的时候,给动态绑定了一个class属性,然后样式里面就给了warning,看起来怪怪的,很不舒服