grunt学习
有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包。对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习。
grunt是一套基于Node.js的命令行工具,所以先确保环境中已安装好了Node环境。
接着安装grunt,如下:
1、安装CLI
CLI是grunt命令行,先将其安装到全局环境中。点击开始->运行->cmd,执行以下命令进行安装:
npm install -g grunt-cli
安装一次即可,以后就可以在任何项目的子目录下运行grunt,执行grunt命令。
2、配置package.json和Gruntfile文件
这两份文件需要添加在项目里的,且要在同一个目录下。如tool文件所示。
以压缩css文件下的style.css、images文件、js文件下的flex.js为例:
① package.json
用于存储项目的元数据,在此文件中列出项目依赖的grunt和Grunt插件,即Gruntfile.js中定义的任务,放置于devDependencies配置段内。
{
"name": "demo",
"version": "1.0.0",
"description": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^3.0.4",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-uglify": "^0.11.1"
}
}
② Gruntfile文件
Gruntfile.js或者Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。
(1)''wrapper''函数
module.exports = function (grunt) {
// ...
}
(2)项目/任务配置
用initConfig方法将存储在package.json文件中的JSON元数据读取引入到grunt config中。
grunt.initConfig({
// 从package.json读取配置信息
pkg: grunt.file.readJSON('package.json'),
......
})
为系统配置任务,如imagemin图片压缩,主要是找到要压缩的图片路径src,设置压缩后的存放路径dest。
imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [
{
expand: true,
cwd: '../images/',
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: '../static/images' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}
]
}
}
(3)加载imagemin插件
grunt.loadNpmTasks('grunt-contrib-imagemin');
(4)执行imagemin任务
grunt.registerTask('images', ['imagemin']);
完整配置代码如下:
module.exports = function (grunt) {
'use strict';
grunt.initConfig({
// 从package.json读取配置信息
pkg: grunt.file.readJSON('package.json'),
imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [
{
expand: true,
cwd: '../images/',
src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
dest: '../static/images' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}
]
}
},
uglify: {
options: {
sourceMap: false,
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//压缩文件头部注释
},
dist: {
files: [{
expand:true,
cwd:'../js/',//js目录下
src:'**/flex.js',//js下的flex.js文件,若是所以js文件,则为**/*.js
dest: '../static/js'//压缩后的文件输出到此目录下
}
]
} },
autoprefixer: {
options: {
// Task-specific options go here.
},
dist: {
files: [{
expand:true,
src:['../css/style.css'],//css文件下的style.css
dest: '../static/css/'//输出到此目录下
}]
}
},
cssmin: {
dist: {
files: [
{
expand:true,
cwd:'../css/',//css目录下
src:['**/style.css'],//所有css文件
dest: '../static/css'//输出到此目录下
}
]
}
}
});
// 加载包含类似"imagemin"任务名的插件
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-autoprefixer'); // 默认被执行的任务列表
grunt.registerTask('default', ['uglify','autoprefixer','cssmin','imagemin']);
grunt.registerTask('autopre', ['autoprefixer']);
grunt.registerTask('css', ['autoprefixer','cssmin']);
grunt.registerTask('images', ['imagemin']);
grunt.registerTask('js', ['uglify']);
};
3、执行命令
配置好package.json和Gruntfile.js后,在包含该文件的目录下,先执行npm install命令安装项目依赖的库,会生成tool文件下的node_modules文件。
npm install
其次,执行grunt命令
grunt
4、压缩完成,生成static文件夹存放压缩后的文件,如下
grunt中文网:http://www.gruntjs.net/
grunt学习的更多相关文章
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
- Grunt 学习笔记【2】---- 配置和创建任务
本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如: ...
- 我的grunt学习笔记
什么是grunt? Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfil ...
- Grunt学习日记
Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm i ...
- grunt学习笔记
1. 在使用grunt前需要执行的几条命令和用途 npm uninstall -g grunt 删除掉全局grunt npm install -g grunt-cli 把grunt加入你的系统搜索路 ...
- grunt学习随笔
1 grunt 安装 全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1packa ...
- grunt学习笔记1 理论知识
你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便 ...
- grunt学习三-bower(一)
bower是什么?官网给出的 a package manager fow the web.简单说引入文件版本管理,例如jquery,传统做法到jquery的官网下载下,在引入,这样比较繁琐,也不利用 ...
- grunt学习二
1. 新建文件和文件目录 mkdir grunt-in-action cd grunt-in-action cd grunt-in-action mkdir grunt-empty cd grunt- ...
随机推荐
- [JavaScript]'this'详解
http://blog.csdn.net/sodino/article/details/51318565
- careercup-C和C++ 13.9
13.9 编写支持对齐分配的malloc和free函数,分配内存时,malloc函数返回的地址必须都能被2的n次方整除. 解法: 一般来说,使用malloc,我们控制不了分配的内存会在堆里哪个位置.我 ...
- 启动和启动和停止MySQL服务停止MySQL服务
1. 启动MySQL服务 启动MySQL服务的命令为: /etc/init.d/mysqld start 命令执行后如图7-5所示,表示启动MySQL服务成功. (点击查看大图)图7-5 启动 ...
- [COCOS2DX]第一个开源项目的部署和运行<win32版本>
1.无法加载项目: 1.1 按照之前的方法创建一个名为FirstDemo的项目,并将下载到的源代码包全部拷贝到FirstDemo中 1.2 点击demo.sln启动项目: 修改属性: 2.无法打开“g ...
- how to learn algorithms(ZAC)
(这一篇觉得写得很棒,故拷过来以便慢慢看,细细体会,详情请访问http://blog.csdn.net/shenmen123456/article/details/6575647) 第一阶段:练经典常 ...
- TreeMap与TreeSet的实现
虽然TreeMap 是 Map 接口的常用实现类,而 TreeSet 是 Set 接口的常用实现类,但TreeSet底层是通过 TreeMap来实现的,因此二者的实现方式完全一样.而 TreeMap ...
- synopsys license maker
参见bingled大牛的文章(http://bbs.eetop.cn/viewthread.php?tid=366602&extra=&page=1) 注意:经坛友提示,部分系统版本2 ...
- 浅试WebStorm配置Node.js开发环境
web前端开发IDE一直喜欢用WebStorm,这里简单介绍如何用WebStorm搭建一个Node.js开发环境. 首先,需要在本地安装好node.js,以及npm包管理工具.你也可以吧node.js ...
- Filezilla FTP Server 设置帐号主目录文件夹的方法和多个帐号共享一个文件夹的方法
1.点击用户头像进入 2.共享文件夹 3.添加共享文件夹 4.设置一个主目录 5.右键主目录 如图6设置别名,别名问主目录路径+别名名称 如:主目录[d:\pro\home\] 别名[aliases1 ...
- 偶尔会用到的有用的CMD命令
1.解压CHM cd /d (如果你的chm文档在系统盘的话,就没有必要写这个/d) [你的chm文档的路径名] 回车 hh -decompile [源文件的保存路径] [要反编译的chm格式电子书] ...