grunt简记

grunt和gulp都是前端自动化的工具，grunt更成熟，插件社区全、大；gulp比较年轻，性能更好，更简单容易。具体使用哪种可根据实际项目组来决定。

创建任务

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/'
             }
         }
     })
 };