grunt简记

grunt和gulp都是前端自动化的工具，grunt更成熟，插件社区全、大；[b]gulp比较年轻，性能更好，更简单容易。具体使用哪种可根据实际项目组来决定。[/b]
创建任务
grunt默认执行的是default文件

module.exports = function(grunt) {
grunt.registerTask('default',function(){
console.log('Hello Grunt');
})
}

在执行他的时候，需要给参数赋值，比如在命令行输入：grunt greet:marymei

module.exports = function(grunt) {
grunt.registerTask('greet',function(name){
console.log('Hello' +name);
})
}

处理错误,遇到错误warn默认就不继续执行了，但是可以在命令行设置grunt greet:n --force来强制执行
但是如果是fatal,那么即使使用了grunt greet:n --force他也是不向下执行的

module.exports = function(grunt) {
grunt.registerTask('greet',function(name){
if(name.length < 2) {
grunt.warn('名字太短了~');
}
grunt.log.writeln('Hello' +name);
})
}

链接多个任务：

module.exports = function(grunt) {
grunt.registerTask('greet-1',function(){
grunt.log.writeln('Hello');
});
grunt.registerTask('greet-2',function(){
grunt.log.writeln('Hola');
});
grunt.registerTask('greet-3',function(){
grunt.log.writeln('您好');
});
grunt.registerTask('greentAll',['greet-1','greet-2','greet-3']);
};

初始化：

module.exports = function(grunt) {
grunt.initConfig({
greet: {
english: 'Hello'
}
});
grunt.registerTask('greet',funtion(){
grunt.log.writeln(grunt.config.get('greet.english'));
});
};

多任务：

module.exports = function(grunt) {
grunt.initConfig({
greet: {
english: 'Hello'，
spanish:'Hola',
chinese:'您好'
}
});
grunt.registerMultiTask('greet',funtion(){
grunt.log.writeln(this.target + ':' + this.data);

});
};

文件与目录
创建目录

module.exports = function(grunt) {
grunt.registerTask('createFolders',function(){
grunt.file.mkdir('dist/stylesheets');
});
};

tree -I node_modules 命令可以查看文件目录

删除目录：

module.exports = function(grunt) {
grunt.registerTask('createFolders',function(){
grunt.file.mkdir('dist/stylesheets');
});
grunt.registerTask('clean',function(){
grunt.file.delete('dist');
});
};

显示版本

module.exports = function(grunt) {
grunt.initConfig({
pkg:grunt.file.readJSON('package.json');
});
grunt.registerTask('copyright',function(){
var content = grunt.tamplate.process('<%= pkg.name%>这个项目是由<%= pkg.author %>创建的，现在的版本<%= pkg.version %>');
grunt.file.write('copyright.txt', content);
});
};

复制文件：
module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-copy'); }

配置要复制的文件：

module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js'
dest:'dist/'
}
}
})
};

监听文件变化的插件：
先安装如下命令
插件：npm install grunt-contrib-watch --save-dev

module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
//加载监听文件变化，文件发生变化执行指定的任务
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
html:{
files: ['index.html'],
tasks:['copy.html']
}
},
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js',
dest:'dist/'
}
}
})
};

插件
创建服务器：grunt-contrib-connect
配置服务器
实时刷新：livereload
编译sass：grunt-contrib-sass
编译less：grunt-contrib-less
合并文件：grunt-contrib-concat
选项：options
最小化js：grunt-contrib-uglify
最小化css：grunt-contrib-cssmin
最小化图像：grunt-contrib-imagemin
......

安装插件的命令 sudo npm install xxxx --save-dev

配置服务器:

module.exports = function(grunt){
//加载复制文件的插件
grunt.loadNpmTasks('grunt-contrib-copy');
//加载监听文件变化，文件发生变化执行指定的任务
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.initConfig({
connect:{
server:{
options: {
port:8000,
base:'dist'
}
}
},
watch: {
html:{
files: ['index.html'],
tasks:['copy.html']
}
},
copy: {
html: {
src: 'index.html',
dest: 'dist/'
},
style: {
src: 'stylesheets/*.css',
dest: 'dist/'
},
js: {
src:'javascript/**/*.js',
dest:'dist/'
}
}
})
};