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可监听文件变化
windows下grunt的快速入门的更多相关文章
- Windows下通过脚本快速修改IP地址
Windows下通过脚本快速修改IP地址 如果通过Windows的网络属性修改Ip/网关,真是太麻烦了. 经常要切换ip,所以我写了两个脚本: c:\办公室.bat netsh interface i ...
- windows下Graphviz安装及入门教程
下载安装配置环境变量 intall 配置环境变量 验证 基本绘图入门 graph digraph 一个复杂的例子 和python交互 发现好的工具,如同发现新大陆.有时,我们会好奇,论文中.各种专业的 ...
- windows下用wubi快速安装ubuntu
由于开发需要,我们可能要用到ubuntu,然而又不能完全抛弃windows,于是双系统是个不错选择. wubi是一个在windows下快速安装ubuntu双系统的工具,它包含在ubuntu 12及以前 ...
- IDEA工具下Mybaties框架快速入门程序
本篇文章介绍在IDEA工具下mybatis快速入门程序分为以下五步 1 添加依赖包 2 编写pojo对象 3 编写映射文件 4 编写核心配置文件 5 测试框架 详细如下 建立Mod ...
- Windows下RabbitMQ安装及入门
1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...
- [转]RabbitMQ系列(一):Windows下RabbitMQ安装及入门
https://blog.csdn.net/hzw19920329/article/details/53156015 1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang ...
- :Windows下RabbitMQ安装及入门
1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang,原因在于RabbitMQ服务端代码是使用并发式语言erlang编写的,下载地址:http://www.erlang. ...
- 在WINDOWS下 三步快速配置 eclipse c++ 环境
所需软件 1.Eclipse IDE for C/C++ Developers http://www.eclipse.org/downloads/packages/eclipse-ide-cc-dev ...
- Windows下vue-cli脚手架搭建入门<一>
简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行,输入命令 node-v .np ...
随机推荐
- Https双向验证与Springboot整合测试-人来人往我只认你
1 简介 不知不觉Https相关的文章已经写了6篇了,本文将是这个专题的最后一篇,起码近期是最后一篇.前面6篇讲的全都是单向的Https验证,本文将重点介绍一下双向验证.有兴趣的同学可以了解一下之前的 ...
- libevent(六)http server
客户端: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <signa ...
- Re模块的 三个方法
import re s1 = '绿茶白茶黄茶青茶红茶黑茶' s2 = '中国绿茶白茶黄茶青茶红茶黑茶' ret = re.findall(".茶", s1) print(ret) ...
- WPF客户端自动升级
实现原理:通过一个辅助程序(更新程序.exe)比较本地版本号和服务器的版本,若服务器版本新则通过更新程序.exe下载服务器上资源(我是把最新的文件压缩成zip放到服务器上)到本地进行替换. 服务器放置 ...
- VMware Tanzu已融合云原生与K8s 市场前景尚不确定
Tanzu是什么? Tanzu 结合了Wavefront IT监控的项目和产品,VMware于2017年5月收购了该软件,并加入了Cloud Foundry PaaS实用工具.VMware在2019年 ...
- 11JAVA基础-集合
一.集合 ` 二.Collection类 Collection 是单列的顶层类. Collection是接口. 创建对象需要借助多态. //e为集合中数据类型 //ArrayList是List的实现类 ...
- 「雕爷学编程」Arduino动手做(25)——MQ2气敏检测模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- Vue与 Vue组件部分
1.Vuex作用?哪种功能场景使用它? 答案:vue框架中状态管理. 场景有:单页面应用中,组件之间的状态.音乐播放. 登录状态.加入购物车 2.解释vuex最常用的两种属性 答案:分别State.G ...
- Netty框架问题记录1--多线程下批量发送消息导致消息被覆盖
业务背景 项目是基于Netty实现的实时课堂项目,课堂中老师需要对试卷进行讲解,则老师向服务器发送一个打开试卷信息的请求,服务器获取试卷信息,将试卷信息发送给所有的客户端(学生和老师). 发送给学生的 ...
- Error creating bean with name 'org.springframework.aop.aspectj.AspectJPointc
问题 出现报错: Error creating bean with name 'org.springframework.aop.aspectj.AspectJPointc 原因 缺失两个库文件: as ...