Grunt简介 - gintong/go2js GitHub Wiki
##为什么使用Grunt 使用grunt可以自动化的完成常见的压缩代码、合并文件、检查语法错误、执行测试代码、将Sass或Less转换成CSS代码等任务,为个人或团队减少劳动和耗时,从而帮助我们自动化的完成相关任务管理和执行工作。
##官方文档
#学习总结 ##安装 Grunt基于Node.js,所以需要先安装Node.js
npm install grunt-cli -g
grunt-cli表示安装的是grunt的命令行界面
##配置 grunt在使用时分grunt-cli命令界面和grunt模块两个概念,其中grunt模块属于Node.js中的模块范畴,遵循Node.js相关约定
###package.json
- 使用
npm init
创建package.json文件 - 使用
npm install [插件模块名] --save-dev
自动下载插件模块,并将依赖加入devDependencies
首先在你的node.js项目配置文件package.json中,需要配置grunt相关的模块,例如
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"//不低于0.2.2
}
}
#Gruntfile.js
Grunt使用Gruntfile.js作为配置文件,当使用grunt相关命令执行时,将根据此文件进行执行。如想指定特定文件,可使用grunt --gruntfile [filepath]
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//读入外部文件
jshint: {
files: ['controllers/**/*.js', 'lib/**/*.js', 'models/**/*.js'],
options: {//配置属性,替换默认值
jshintrc: '.jshintrc'
}
},
requirejs: {
build: {
options: {
baseUrl: 'public/js',
mainConfigFile: 'public/js/config.js',
dir: '.build/js',
optimize: 'uglify',
modules: [{name: 'app'}]
}
}
},
less: {
build: {
options: {
yuicompress: true,
paths: ['public/css']
},
files: {
'.build/css/app.css': 'public/css/app.less'
}
}
},
makara: {
files: ['public/templates/**/*.dust'],
options: {
contentPath: ['locales/**/*.properties']
}
},
dustjs: {
build: {
files: [
{
expand: true,
cwd: 'tmp/',
src: '**/*.dust',
dest: '.build/templates',
ext: '.js'
}
],
options: {
fullname: function (filepath) {
var path = require('path'),
name = path.basename(filepath, '.dust'),
parts = filepath.split(path.sep),
fullname = parts.slice(3, -1).concat(name);
return fullname.join(path.sep);
}
}
}
},
copyto: {
build: {
files: [
{ cwd: 'public', src: ['**/*'], dest: '.build/' }
],
options: {
ignore: [
'public/css/**/*',
'public/js/**/*',
'public/templates/**/*'
]
}
}
},
clean: {
'tmp': 'tmp',
'build': '.build/templates'
},
mochacli: {
src: ['test/*.js'],
options: {
globals: ['chai'],
timeout: 6000,
ignoreLeaks: false,
ui: 'bdd',
reporter: 'spec'
}
},
foo:'c',
bar:'b<%= foo %>d'//使用模板
});
grunt.loadNpmTasks('grunt-contrib-less');//加载npm插件
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-mocha-cli');
grunt.loadNpmTasks('grunt-dustjs');
grunt.loadNpmTasks('grunt-copy-to');
grunt.loadTasks('./node_modules/makara/tasks/');
grunt.registerTask('i18n', ['clean', 'makara', 'dustjs', 'clean:tmp']);//注册Task 使用 grunt i18n执行
grunt.registerTask('build', ['jshint', 'less', 'requirejs', 'copyto', 'i18n']);
grunt.registerTask('test', ['jshint', 'mochacli']);
//注册自定义任务,通常放到外部js文件
grunt.registerTask('custome','Log some stuff.',function(){
grunt.log.write(‘Logging some stuff...').ok();//调用grunt的api
})
};
##API详细
##常见插件
##自定义插件
1、使用npm install -g grunt-init
安装grunt-init模块
2、使用git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
安装gruntplugin模板
3、在目标空文件夹中执行grunt-init gruntplugin
命令
4、在目标文件夹中执行npm install
5、编写插件
6、执行npm publish
发布插件到npm