Nodejs的Gruntjs使用一则
Gruntjs是前端项目构建工具,基于nodejs命令。有些js项目是基于Gruntjs构建的,如Jquery。
Gruntjs主要功能有:
1.合并文件。
2.压缩html,js,css,图片文件。
3.语法检测。
4.单元测试。
5.watch功能。
本文主要介绍watch配合chrome浏览器插件LiveReload实现网页自动刷新功能。
Nodejs安装
下载nodejs,官网地址 http://nodejs.org/ 下载最新版本按照提示下一步安装即可。
Gruntjs的安装
Gruntjs是基于Nodejs的,安装前要保证Nodejs环境成功安装,每个Gruntjs都包括两个文件:
1.package.json:依赖模块和用到的变量说明等,如:version,name。
2.Gruntfile.js:node module写法的任务管理文件。
package.json
例如我的package.json内容如下:
{
"name": "mitunes",
"version": "1.0.0",
"description": "mitunes",
"devDependencies": {
"grunt-shell": "~0.2.2",
"grunt-contrib-watch": "~0.4.4"
}
}
如果安装了新的插件,那么这个package.json会自动更新的,或者修改它然后执行npm install,也可以安装对应的插件。
Gruntfile.js
Gruntfile.js是node module格式的任务管理文件,如下:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
files: ['../*.html','../js/*.js','../css/*.css'],
options: {
livereload: true
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};
运行Grunt
1.任意新建一个文件夹,例如:
D:\work\nodejs,新建的nodejs文件夹然后添加package.json和Gruntfile.js文件
2.打开cmd进入到nodejs文件夹,运行 npm install命令,例如:
此时文件夹下多出一个文件夹node_modules。
3.输入命令grunt wacth,例如:
安装chrome浏览器插件LiveReload
例如:
完成
chrome打开你的网站使你的网站引用的静态文件指向Gruntfile.js中watch的文件或目录,开启liveReload插件,此时修改你的网站静态文件看到chrome自动刷新。
如何修改网站静态文件指向本地,参考:Fiddler的简单使用
Nodejs的Gruntjs使用一则的更多相关文章
- GruntJS学习(转)
GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lin ...
- 好文推荐系列--------(2)GruntJS——重复乏味的工作总会有人做(反正我不做)
GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lin ...
- 使用Typescript来写javascript
使用Typescript来写javascript 前几天尝试使用haxejs来写javascript,以获得静态类型带来的益处.虽然成功了,但很快发现将它与angularjs一起使用,有一些不太顺畅的 ...
- TypeScript的概要和简介
安装 Typescript的基本介绍可以自行百度 centos虚拟机中可以完整的体验, virtualbox安装开发版本,选择开发工具项,否则增强功能无法安装[提示kernel 头文件缺失,yum安装 ...
- mac之os x系统下搭建nodejs+express4.x+mongodb+gruntjs整套前端工程
第一次在Mac OS X上搭建前端开发环境,做一个小小记录,包括一些与windows系统的区别和常用快捷键 首先,在进行环境搭建之前先来看一下苹果系统的“cmd”,也就是Terminal(终端). 打 ...
- 基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)
Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异 ...
- 用GruntJS合并、压缩JS文件
为什么要合并.压缩你的JS文件? 一个项目开发完成我们总能发现有一堆js文件非常混乱. 一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...
- grunt让Nodejs规范起来
Aug 17, 2013 Tags: gruntJavascriptnodejs Comments: 9 Comments grunt让Nodejs规范起来 从零开始nodejs系列文章,将介绍如何利 ...
- 使用NodeJS、GruntCLI遇到的问题
运行环境CMD NODEJS版本v0.8.4 node --version 需求:需要用到Grunt的JS编译功能,各位别笑我. 使用代理 npm config set proxy http://i ...
随机推荐
- 温故知新的错题训练:Coin game
传送门:http://192.168.173.163/JudgeOnline/problem.php?cid=1244&pid=1 输赢规则:无法再放下硬币的人就输. 博弈论的基本假定:他俩都 ...
- Unity3D制作3D虚拟漫游场景(二)
传送门: Unity3D制作3D虚拟漫游场景(一) -------------------------------------------------------------------------- ...
- AntDesign(React)学习-9 Dva model reducer实践
今天肺炎增长数字依然吓人,感觉穿越到丧失片里了. 本节开始学习dva model使用,官网的讲解太文档化,对新手实践不太友好,自己简化了一个最简单的演示代码. 1.在src,models文件夹下创建u ...
- AE创建组件失败,项目中已存在对esri.arcgis.***的引用
AE创建组件失败,项目中已存在对esri.arcgis.***的引用 解决办法:在解决方案资源管理器的引用中把错误提示中的引用删掉,再创建组件就没问题了.
- 0005 修改Django工程名
写框架非常耗时间,把框架写好以后,经测试稳定的框架,需要保存下来,以后有工程需要,直接更改工程名即可. 01 右键点击工程名,点击Refactor/Rename 02 选择更改工程名 03 关闭PyC ...
- 《NVMe-over-Fabrics-1_0a-2018.07.23-Ratified》阅读笔记(3)-- 命令
3 命令 Fabrics命令用于创建队列和初始化controller.Fabrics命令的Opcode字段填写0x7F.无论controller是否处于使能状态(CC.EN)Fabrics命令都会被处 ...
- (转)java垃圾回收二
转自:http://shuaijie506.iteye.com/blog/1779651 在网上看到一篇不错的文章,记录下来备忘. 要理解java对象的生命周期,我们需要要明白两个问题, 1.java ...
- [CF]Round 516
A Make a triangle! 题意:给定三根线段,问最少要延长多少才能拼成一个三角形. 数学题. B Equations of Mathematical Magic 题意:求$a - (a \ ...
- Netcat工具
一般Netcat有两个版本,一个版本是不提供反向连接的版本,一个是全功能版本.这两者的区别就是是否带-e参数,只有带-e参数的版本才支持反向连接. 参数说明 -c shell commands she ...
- IF EXISTS 两个条件连用
当IF EXISTS要判断多个条件并存时,可以用AND连接,NOT EXISTS同理 IF EXISTS (SELECT 1 ) AND EXISTS (SELECT 2 ) BEGIN ...... ...