优化你的Grunt构建

在前端开发的今天，如果没用过Grunt或Gulp你还真就不好意思和人打招呼的（今天先说Grunt）。因为前端开发变得越来越复杂，前端工程化也越来越重要。当然，相信读者都能快速通过Grunt完成自己的前端工作流（workflow），下面是一个常见的Gruntfile.js, 它也的确能很好地工作。

module.exports=function(grunt){   grunt.initConfig({    pkg:grunt.file.readJSON('package.json'),    concat:{     dist:{      src:['src/js/jquery.js','src/js/index.js','src/js/main.js'],      dest:'dist/build.js',     }    },    imagemin:{     options:{      cache:false     },     dist:{      files:[{       expand:true,       cwd:'src/',       src:['**/*.{png,jpg,gif}'],       dest:'dist/'      }]     }    }   });   grunt.loadNpmTasks('grunt-contrib-concat');   grunt.loadNpmTasks('grunt-contrib-imagemin');   grunt.registerTask('default',['concat','imagemin']);  };

但随着你的项目迭代，你很可能会加入更多的构建task，然后你的Gruntfile.js很可能会变成几百行，甚至上千行的大文件，而且，通常在这个时候，你也很可能会遇到构建太慢的尴尬，简单的一次文件修改要花费数秒，甚至更长的时间才能完成构建。这种体验就好比在一个2G内存的电脑上，同时开着10多个Sublime在写代码一样，影响工作效率不说，更影响心情。本文将与大家一起探讨Grunt在以下两方面的优化：

Gruntfile.js瘦身

1. 使用load-grunt-tasks（https://www.npmjs.com/package/load-grunt-tasks）此grunt插件会根据package.json加载相应的Grunt任务，帮我们省去了手动加载的麻烦。

2. 使用load-grunt-config（https://www.npmjs.com/package/load-grunt-config），这时你的Gruntfile.js会变得非常简单：

module.exports=function(grunt){    varpath=require('path');    require('load-grunt-config')(grunt,{      // Grunt任务配置目录      configPath:path.join(process.cwd(),'grunt/config'),      // 加载Grunt任务并初始化      loadGruntTasks:{        pattern:['grunt-*'],        config:require('./package.json'),        scope:'devDependencies'      }    });  };

1. 说到构建时间，首先就得知道我们每个构建任务花费的时间。这时有两个插件可以使用：time-grunt（https://www.npmjs.com /package/time-grunt）和grunt-timer（https://www.npmjs.com/package/grunt- timer）。time-grunt在构建完成后，会给出每个任务的耗时及占总耗时的百分比。但如果有watch任务存在，是看不到这个时间统计结果的，这时我们可以用grunt-timer;

2. 另一个不得不提到的插件是grunt-newer(https://www.npmjs.com/package/grunt-newer)。有了这个插件，我们就可以做到文件更改后，增量更新，而不是对所有的文件去执行任务task。此插件的使用也是非常简单，只需要在原来任务前加上newer:即可

watch:{    css:{      files:'src/sass/**/*.scss',      //tasks: ['compass:dev']    },    js:{      files:'src/js/**/*.js',      tasks:['newer:concat']    }  }

3. 使用grunt-concurrent（https://www.npmjs.com/package/grunt-concurrent）或 grunt-parallel（https://www.npmjs.com/package/grunt-parallel）并行运行你的构建任务

4. 使用jit-grunt(https://www.npmjs.com/package/jit-grunt)按需加载你的Grunt任务。当然我们用下面的代码，简单地实现此功能：

grunt.registerTask('dev',[],function(){    grunt.loadNpmTasks('grunt-contrib-clean');    grunt.loadNpmTasks('grunt-contrib-copy');    grunt.loadNpmTasks('grunt-express-concat');    grunt.loadNpmTasks('grunt-compass');    grunt.loadNpmTasks('grunt-contrib-watch');    grunt.loadNpmTasks('grunt-newer');    grunt.task.run(     'clean:dev',     'compass:dev',     'concat',     'watch'    );  });