windows下grunt的快速入门
1.认识grunt
grunt是什么:他是一套前端自动化工具,是一个基于nodejs的命令行工具。(Grunt和Grunt插件是通过npm 安装并管理的,所以首先要安装nodejs)。
grunt能干什么:1.压缩文件 2.合并文件 3.简单的语法检查 4.监听文件变动 5.less编译
grunt优点:1.减轻劳动,简化工作 2.免费,没有盗版 3.插件多,而且可以自己编写插件
2.grunt安装与使用
第一步:添加package.json和gruntfile.js文件
package.json配置项的添加方式:
a:手动添加 (下面内容已经将基本的grunt插件写好)
{
"name": "grunt_test",
"version": "0.0.1",
"description": "grunt test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-cssmin":"*",
"grunt-contrib-imagemin":"*",
"grunt-contrib-watch": "*",
"grunt-contrib-concat":"*"
},
"keywords": [
"grunt"
],
"author": "caihe",
"license": "ISC"
}
说明:
grunt-contrib-jshint: 检查javascript语法
grunt-contrib-uglify: 压缩以及合并js文件
grunt-contrib-cssmin:压缩以及合并css文件
grunt-contrib-imagemin:图像压缩模块
grunt-contrib-watch:监视文件变动,做出相应动作
grunt-contrib-concat:合并文件
然后cmd窗口中进入到当前项目的根目录输入命令行 :npm install
b:命令行实现:npm install grunt-contrib-jshint --save-dev等
gruntfile.js文件配置:
gruntfile.js 的作用1.读取package.json的信息 2.插件加载、注册任务、运行任务
module.exports = function(grunt){
//项目配置
grunt.initConfig({
//读取配置项
pkg:grunt.file.readJSON("package.json"),
//具体任务
uglify:{
options:{
//加注释
banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> \n*/"
},
build:{
//被压缩的文件的路径
src: "src/jquery-1.9.1.js",
//被压缩后的文件路径
dest:"dest/jquery-1.9.1.min.js"
}
},
//合并
concat:{
options:{
//加注释
banner:"/* 这个文件 <%= pkg.name %><%= pkg.version%> 合并的js\n*/"
},
build:{
//被压缩的文件的路径
src: "src/*.js",
//被压缩后的文件路径
dest:"dest/concat.js"
}
},
jshint: {
files: ['Gruntfile.js'],
options: {
}
},
watch: {
files: ['src/*.html','src/*.css'],
tasks: ['jshint']
}
});
//加载插件
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
//默认执行任务
grunt.registerTask("default",["uglify","concat","jshint",'watch']);
};
然后cmd窗口中进入到当前项目的根目录输入命令行 :grunt
可执行grunt任务grunt watch可监听文件变化
最新文章
- wget: unable to resolve host address 解决办法
- javascript函数的定义与执行
- Jquery.Datatables dom表格定位
- html5响应式设置<;meta>;
- Oracle RAC 服务器端连接负载均衡(Load Balance)
- Weex
- DHCP租约时间工作原理
- LED发光二极管
- ASP.NET Core Razor 页面使用指南
- 浅谈jquery事件命名空间
- Jenkins可用环境变量以及使用方法
- jQuery UI 中Tabs Ajax载入时出现Http 304的问题
- Python中特殊函数和表达式lambda,filter,map,reduce
- Mysql 5.7源码编译启动 报error问题:The server quit without updating PID file (/data/data_mysql/mysql.pid).
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(十五)Spark编写UDF、UDAF、Agg函数
- 使用 Splash
- Gitlab Jenkins WebHook 持续集成配置踩坑记
- scalaWindows和Linux搭建
- pip依赖安装与记录
- linux 内存分析
热门文章
- 转载acm几何基础(2)
- 工具类CountDownLatch的应用---百米赛跑案例
- jQuery中bind()与on()绑定事件的区别
- 操作系统实验——PV操作实现生产者消费者模型
- STM32学习笔记——GPIO
- [hdu5255]枚举
- [hdu5203]计数水题
- 微信小程序云开发|Error: ResourceNotFound.FunctionName, FunctionName 指定的资源不存在。 (41cd9de8-ff9b-4b1e-a65e-81ae9
- ZOOM火速收购加密公司Kaybase 能否补齐安全短板?
- NetCore项目实战篇06---服务注册与发现之consul