Grunt

随着前端发展如日冲天，前端项目也越来越复杂，得益于Nodejs的发展，前端模块化、组件化、工程化也大势所趋。这些年Grunt、Gulp到Webpack随着工程化的发展都大行其道。 前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表。比如: 压缩、编译less、sass、地址添加hash、替换等。 Grunt官网中就说： 对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，完成大部分无聊的工作。而如今的Webpack更像一套前端工程化解决方案。利用强大插件机制，解决前端静态资源依赖管理的问题。 Webpack作者Tobias回复与 Grunt Gulp NPM脚本的比较Tobias： NPM脚本对我而言足矣。实际上，说webpack是Grunt/Gulp的替代器并不完全准确。Grunt和Gulp以及NPM脚本都是任务执行程序。Webpack是_模块打包程序_。这两类程序的目标不一样。但webpack简化了必须“过度使用”Grunt和Gulp和NPM脚本才能实现的Web开发任务也是事实。NPM脚本才是Grunt和Gulp的替代品。不过，除了纯粹的构建之外，任务运行程序也有存在的理由，比如部署、代码检查、版本管理，等等。 Webpack与Grunt、Gulp运行机制# grunt gulp 思路【遍历源文件】->【匹配规则】->【打包】做不到按需加载，对打包的资源，是否用到，打包过程不关心。# webpack【入口】->【模块依赖加载】->【依赖分析】->【打包】在加载、分析、打包的过程中，可以针对性的做一些解决方案。比如：code split(拆分公共代码) Grunt与Gulp性能比较Grunt: 每个任务处理完成后存放在本地磁盘.tmp目录中，有本地磁盘的I/O操作，会导致打包速度比较慢。Gulp: gulp与grunt都是按任务执行，gulp有一个文件流的概念。每一步构建的结果并不会存在本地磁盘，而是保存在内存中，下一个步骤是可以使用上一个步骤的内存，大大增加了打包的速度。 参考：grunt官网webpack作者接受参访文章

作者：心叶时间：2019年01月24日 20:08需求说明在我们开发代码的时候，不会把全部代码写在一个文件，只有最后打包的时候会合并在一起，而有时候，我们除了要合并代码，还可能需要更灵活的合并方案。这个插件就是在一个代码文件中的指定位置插入一些了碎片文件。如何使用首先，需要安装node包：npm install grunt-plug-insert –save-dev一旦安装好了，你就可以在Gruntfile.js中加入下面代码，使用这个插件：grunt.loadNpmTasks(‘grunt-plug-insert’);以上和别的grunt插件都一样，我们主要说明一下如何配置任务。grunt.initConfig({ insert: { options: { // Place of segmentation separator: ‘@CODE inserts compiled test here’, // Insert the target file target: ’test/fixtures/test’ }, files: { // Target and fragmentation files ’tmp/test’: [’test/fixtures/insert1’, ’test/fixtures/insert2’] }, },});上面是配置的一个例子，和别的插件一样，也可以配置任务名称等，这里不再赘述了，我们来说一下几个配置选项的意思。options.separator：配置插槽。也就是我们会把『目标文件』中的这段字符串替换成一系列『碎片文件』，并最终保存在『打包目标文件』。options.target：『目标文件』files：我们可以在这里配置多个键值对，键是一个字符串，也就是『打包目标文件』，值是一个数组，也就是『碎片文件』。从上面的配置可以看出来，我们可以一次配置多个合并任务，上面只配置了一个。对例子说明为了帮助更好的理解，我们对上面的例子进行说明：把文件test/fixtures/test中的字符串"@CODE inserts compiled test here"替换成文件test/fixtures/insert1和文件test/fixtures/insert2，并把合并后的结果保存在文件tmp/test中。