一:Grunt
http://www.gruntjs.net/ http://gruntjs.com/
基于命令行的前端自动化管理工具。用于自动化构建、测试、发布及生成文档等,如:
前期:一键替代重复创建及组织前端文件
开发:自动刷新
发布:HTML去掉注析、换行符 - HtmlMin
CSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
二:安装配置
1:node环境(>0.8.0), npm包管理
2:卸载旧版
npm uninstall grunt -g
3:安装grunt-cli
Grunt的工具具有两个
grunt
npm install grunt --save-dev
grunt-cli(Grunt命令行工具,安装这个工具 grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了,例如如我们要为某一个项目中添加Grunt,则使用 grunt-cli的grunt命令)
$ npm install -g grunt-cli
4:安装 grunt-init(可选)
grunt-init是个脚手架工具,它可以帮你完成项目的自动化创建,包括项目的目录结构,每个目录里的文件等。具体情况要看你运行grunt-init指定的模板,以及创建过程中你对问题的回答
1)安装
$ npm install -g grunt-init
2)安装模板
你首先得安装github : http://windows.github.com
Grunt官方维护的grunt-init模板:
grunt-init-commonjs 创建一个包含Nodeunit单元测试的commonjs模块。(sample "generated" repo | creation transcript)
grunt-init-gruntfile 创建一个基本的Gruntfile。(sample "generated" repo | creation transcript)
grunt-init-gruntplugin 创建一个包含Nodeunit单元测试的Grunt插件。(sample "generated" repo | creation transcript)
grunt-init-jquery 创建一个包含QUnit单元测试的jQuery插件。(sample "generated" repo | creation transcript)
grunt-init-node 创建一个包含Nodeunit单元测试的Node.js模块。(sample "generated" repo | creation transcript)
打开命令行输入:
linux:
git clone https://github.com/gruntjs/grunt-init-commonjs.git ~/.grunt-init/commonjs
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
git clone https://github.com/gruntjs/grunt-init-node.git ~/.grunt-init/node
windows
git clone https://github.com/gruntjs/grunt-init-commonjs.git %USERPROFILE%/.grunt-init/commonjs
git clone https://github.com/gruntjs/grunt-init-gruntfile.git %USERPROFILE%/.grunt-init/gruntfile
git clone https://github.com/gruntjs/grunt-init-gruntplugin.git %USERPROFILE%/.grunt-init/gruntplugin
git clone https://github.com/gruntjs/grunt-init-jquery.git %USERPROFILE%/.grunt-init/jquery
git clone https://github.com/gruntjs/grunt-init-node.git %USERPROFILE%/.grunt-init/node
windows安装完之后会在类似以下目录找到它们:
C:\Users\你的用户名\.grunt-init
在windos中使用模板创建项目步骤如下
1)创建项目如Test
2)打开cmd,切换到Test目录
3)假如我们要创建以Jquery模板的项目,则将Jquery模板拷贝到Test根目录下面
git clone %USERPROFILE%/.grunt-init/jquery jquery
4)使用grunt-init工具使用模板进行自动化创建前端文件(根据提示一步一步创建)
grunt-init jquery --force
三:为你的项目配置Grunt
假设项目为Test
1:在Test目录下创建package.json
创建方式:
1)根据grunt-init模板自动创建一个特定的package.json文件(如上 二:4);
2)在命令终端通过npm init命令自动创建一个基本的package.json文件;
3)从官网上复制或者下载一个package.json文件;
4)手工创建一个package.json文件;
格式:
{
"name":"项目名称",
"version":"项目版本号",
"description":"项目描述",
"author":"项目创建者",
"license":"项目版权",
"devDependencies": {
//项目依赖插件
}
}
例子:
{
"name": "Test",
"version": "0.0.1",
"description": "project with grunt.",
"author": "xxx",
"license": "BSD",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint":"~0.10.0",
"grunt-contrib-nodeunit":"~0.4.1",
"grunt-contrib-uglify":"~0.5.0"
}
}
打开cmd,切换到Test根目录,也可以通过以下命令的方式向package.json文件中添加插件:
$ npm install grunt插件名 --save-dev
2:在Test目录下创建Gruntfile.js文件
创建方式:
1)根据grunt-init模板自动创建一个特定的Gruntfile.js文件(如上 二:4);
2)在命令终端通过npm init命令自动创建一个基本的package.json文件;
3)从官网上复制或者下载一个Gruntfile.js文件;
4)手工创建一个package.json文件;
格式:
module.exports = function(grunt){
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
//Grunt 任务配置
});
//加载Grunt插件
grunt.loadNpmTasks('Grunt插件名');
//默认的Grunt任务
grunt.registerTask('default',['Grunt任务']);
};
例子:
module.exports = function(grunt) {
//构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
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']);
};
3:执行安装,为项目Test安装Grunt
$ npm install
四:开发
1:启动文件变更监控(livereload)
$ grunt live
五:发布
1:编码完成后Build
$ grunt build