Grunt.js 上手
Official Site gruntjs.org/docs/getting-started.html
或者看http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml
grunt可以帮我们做什么
grunt是一个自动化工具 自动压缩js css 建立相关的文件&文件夹
首先grunt需要运行在NodeJS的环境下
安装Grunt之前,可以在命令行中运行node -v查看你的Node.js版本
node环境(>0.8.0)
node环境包括npm包管理工具
npm是一个Node.js的包管理器,运行在命令行下,用于管理应用的依赖 (更通俗点 你可以通过它来安装 删除东西)
安装grunt CLI 也就是grunt命令行工具
npm install -g grunt-cli
安装结束后,会告知安装的位置
比如/usr/local/lib/node_modules/grunt-cli、
npm install -g grunt-cli这条命令将会把grunt命令植入到你的系统路径中,这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。
如果没有 就自己手动将npm install -g grunt-cli运行后提示的安装位置添加到环境变量中
如何使用?
在命令行中使用grunt xxx命令 即可执行预先设置好的工作(预先设定的工作保存在Gruntfile.js中)
PS 此命令没有安装grunt 它只是安装了全局可用的命令行工具
PS 使用npm install grunt --save-dev命令安装grunt 不过首先你需要在Node的命令行中cd到你想安装的位置中
该命令执行完之后呢 就会在指定目录下有node_modules文件夹
配置
Gruntfile.js本身会读同目录下的package.json
所以实际上配置有两个文件 json主要是项目信息
而Gruntfile.js存放的是自动化的工作设置
package.json可以通过npm init自动生成(推荐)
记住name项的内容就行 其他随意填
关于entry js 暂时不清楚
这是的json结果(去掉了不是必需的东西)
{
"name": "protest1",
"version": "0.1.0",
"dependencies": {
"grunt-contrib-uglify": "^0.2.7",
"grunt": "^0.4.4"
}
当然可以直接抄官方文档中的内容 只不过关于各个依赖的版本我们不清楚 所以依靠init命令生成最好
安装grunt
npm install grunt --save-dev
完成后会更改package.json
查看一下 发现多出了这个
"devDependencies": {
"grunt": "^0.4.4"
}
安装uglify (一个grunt工具 你可以把grunt理解为一个平台 上面有很多小工具)
npm install grunt-contrib-uglify --save-dev
关于Gruntfile.js
一个简单的例子
module.exports = function(grunt){ // 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%=pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
}); // 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务
grunt.registerTask('default', ['uglify']);
}
pkg这个变量中的key就是json文件中的key 在uglify中 设置了需要被压缩的源文件路径、以及输出的路径
其中输出的文件名前半部分就是在json中定义的名字
运行
假如name我设置为test1
name这个配置就会读src目录下的test1.js并压缩输出到build目录中
Grunt.js 上手的更多相关文章
- 【转】自动化任务运行器 Grunt 迅速上手
原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grun ...
- 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
- Grunt JS构建环境搭建以及使用入门
Grunt JS构建环境搭建以及使用入门 1.应用场景 一种自动化任务处理工具,对于日常的需求(代码规则检查.代码合并)可以实现自动化执行,只需要保留package.json和Gruntfile.js ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- 初探grunt.js
package.js { "name": "ttd_v3", "version": "0.1.0", "aut ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 使用grunt js进行js的链接和压缩
1,http://nodejs.org/download/ 安装nodejs 2,配置环境变量,将nodejs的安装目录放置在Path环境变量中 3,在cmd中 npm install -g grun ...
- dva.js 上手
来源:https://pengtikui.cn/dva.js-get-started/ ——------------------------------------------------------ ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
随机推荐
- linux学习 建立静态库,动态库,写简单的makefile
建立静态库 建立四个文件 bin(可运行文件),lib(库),include(头文件),src(放源文件) 这里的起的库明为add 在src文件里运行 1)gcc -c add.c //编译add.c ...
- QT 信号与槽 QT简单加法器的实现
信号与槽 背景: 面向过程 模块之间低耦合设计(高内聚). 函数调用: 直接调用 回调调用(低耦合) 面向对象 模块之间低耦合设计(高内聚) 对象调用 直接调用 接口调用 QT: 信号与槽解决问题: ...
- Asp.net 获取服务器指定文件夹目录文件,并提供下载
string dirPath = HttpContext.Current.Server.MapPath("uploads/"); if (Directory.Exists(dirP ...
- SDOI2008 Sandy的卡片( 后缀数组 )
求出后缀数组, 然后二分答案, 对height数组分组检验答案. 时间复杂度O(|S| log|S|) ------------------------------------------------ ...
- SGU 149. Computer Network( 树形dp )
题目大意:给N个点,求每个点的与其他点距离最大值 很经典的树形dp...很久前就想写来着...看了陈老师的code才会的...mx[x][0], mx[x][1]分别表示x点子树里最长的2个距离, d ...
- less 工具
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...
- java编辑器
package editor; import java.io.*; import java.awt.*; import java.awt.datatransfer.Clipboard; import ...
- ObjectiveC 文件操作一
1,引用和使用文件 NSFileManager 是一个单例对象,在mac应用中可以获取任何地址,在IOS中获取的是相对应的应用程序的地址.可以使用 defaultManager 来得到当前应用程序地址 ...
- eclipse 插件安装
203.208.46.146 www.google.com203.208.46.146 dl.google.com203.208.46.146 dl-ssl.google.com
- cocos2dx mac环境搭建
1)下载cocos2dx 2.2.3并解压