环境特定的构建工具：Grunt、Gulp和Broccoli-InfoQ

项目的开发、分期和产品版本之间可能会有巨大的改变，这是我们需要基于环境以及特定目标信息改变资源（脚本、样式、模板）、生成标记或者其他内容路径的原因之一。很幸运的是，在 Grunt、Gulp 和 Broccolli 生态系统中已经有很多构建工具能够帮助我们完成这些工作。不久之前来自于 Google Chrome 开发者关系团队的工程师 Addy Osmani 对解决该问题的三种方式（字符串替代、条件注释和模板变量）做了对比。

最简单的选项—字符串/ 正则表达式替换

对于环境特定的输出，最简单的选项是使用字符串替换，通过一个简单的字符串或者正则表达式找出并移除/ 替代HTML 文件中的块。构建文件中可能会有很多目标设置，其中的每一个都能够用任意内容替换字符串。

例如，在Grunt 中使用 grunt-string-replace 的一个非常基础的例子可能是在 prod 构建的时候将字符串 source.js 替换为 build.js，如下所示：

复制代码

  
module.exports = function(grunt) {
 grunt.initConfig({
   'string-replace': {
     prod: {
       src: './app/**/*.html',
       dest: './dist/',
       options: {
         replacements: [{
           pattern: 'source.js',
           replacement: 'build.js'
         }]
       }
     }
   }
 });
 grunt.loadNpmTasks('grunt-string-replace');
 grunt.registerTask('default', ['string-replace']);
};

（ grunt-replace 也能很好的满足这种场景）

一般情况下，文本替换的方式需要少量配置，像 Stephen Sawchuk（Yeoman 和 Bower 的一位贡献者，他认为对于自己的设置而言其他的替代方案过于复杂）这样的开发人员会使用这种方式。从这个 gist 中你可以找到他在项目中是如何使用字符串替换的。

如果你并没有使用 Grunt，那么等价方案还有 gulp-replace 和 broccoli-replace 。

对于简单的场景而言，字符串替换能够很好地完成工作，例如需要更新或者删除多个文件中的一组字符串。但是如果你有大量需要替换的内容，同时需要在源文件和构建文件之间来回跳转以便于算出到底需要替换哪些内容时，这种方式就会变得难以维护。

对于这种场景更好的解决方案是在源文件中就地定义替代品。也就是下面的选项。

条件注释

环境条件注释的基本思想是：在构建文件中通过最少的配置、使用 HTML 注释语法定义将一个字符串替代为目标内容所需要的逻辑和信息（例如路径）。这种方案的可读性比较好，同时也能够很容易地在每一个文件中实现。

下面是一些可选方案：

Grunt：

Gulp：

该列表前三个选项的注释语法在可读性和冗余度方面有所差异，但是它们都能有效地实现同样的结果。所有的选项都能够毫不费力地输出目标 / 环境特定的块，首先让我们来比较一下 targethtml 和 preprocess：

一个<b>grunt-targethtml</b> 示例 (Dev vs. Production)

复制代码

  
Dev：
<!--(if target dev)><!-->
<link rel="stylesheet" href="dev.css" />
<!--<!(endif)-->
<!--(if target dev)><!-->
 <script src="dev.js"></script>
 <script>
   var less = { env:'development' };
 </script>
<!--<!(endif)-->
Production：
<!--(if target prod)><!-->
 <link rel="stylesheet" href="release.css">
<!--<!(endif)-->
<!--(if target prod)><!-->
  <script src="release.js"></script>
<!--<!(endif)-->

同样的<b>grunt-processhtml</b>

复制代码

  
Dev：
<!-- @if NODE_ENV='production' -->
<link rel="stylesheet" href="dev.css">
<!-- @endif -->
<!-- @if NODE_ENV='production' -->
<script src="dev.js"></script>
<script>
 var less = { env:'development' };
</script>
<!-- @endif -->
 
Production：
<!-- @if NODE_ENV='production' -->
<link rel="stylesheet" href="release.css">
<!-- @endif -->
<!-- @if NODE_ENV='production' -->
<script src="release.js"></script>
<!-- @endif -->

正如我们所看到的，按照注释的形式指定逻辑相当直接，这种方式已经被大量地使用，并没有太多的抱怨。

使用条件注释的一个主要缺点是：标记文件中可能会包含大量与构建相关的逻辑。虽然有一些开发人员不喜欢这样，但是这些任务提供了可读性流。这也意味着我们没必要跳回 Gruntfile 中查看它到底正在干什么。

之前列出了 3 个 Grunt 任务，那么 grunt-processhtml 怎么样呢？它有一点专业，你可以使用模板变量以及其他的一些不错的技巧包含完全不同的文件。

例如，在下面的例子中只有当“dist”目标运行的时候才会将 class 修改为“production”：

复制代码

  
<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

或者使用任意一个文件替换目标中的一个块：

复制代码

  
<!-- build:include:dev dev/content.html -->
This will be replaced by the content of dev/content.html
<!-- /build -->

或者根据目标删除一个块：

复制代码

  
<!-- build:remove -->
<p>This will be removed when any processhtml target is done</p>
<!-- /build -->
<!-- build:remove:dist -->
<p>But this one only when doing processhtml:dist target</p>
<!-- /build -->

如果确定需要配置代码注释块格式的能力，那么可以查看 grunt-devcode ，它支持这些。下面是一些示例配置：

复制代码

 
Gruntfile：
Devcode：
   {
     options :
     {
       html: true,        // html files parsing?
       js: true,          // javascript files parsing?
       css: true,         // css files parsing?
       clean: true,
       block: {
         open: 'condition', // open code block
         close: 'conditionend' // close code block
       },
       dest: 'dist'
     },
Markup：
<!-- condition: !production -->
 <li class="right">
   <a href="#settings" data-toggle="tab">
     Settings
   </a>
 </li>
<!-- conditionend -->

如果你想利用占位符的方式实现，那么可以借助于模板变量。

HTML 中的模板变量

构建时模板允许我们将源文件中定义的占位符字符串（例如 <%- title %>）替换为构建文件（例如 Gruntfile）中定义的与特定目标相关的数据（字符串、对象等任何你需要的内容）。与条件注释相比，使用这种方式时你注入的数据并不是在目标文件本身中指定的。这种类型的选项有：

Grunt：

Gulp：

gulp-template

grunt-template 基本上是对 grunt.template.process() 的包装。同时它主要针对的是基于目标的目标字符串操作，你可以通过 data 对象根据 dev/prod 目标改变路径或者内容。下面就是一个这样的例子：

复制代码

  
index.html.tpl
 
Gruntfile.js
module.exports = function(grunt) {
   grunt.initConfig({
       'template': {
           'dev': {
               'options': {
                   'data': {
                       'title': 'I <3 JS in dev'
                   }
               },
               'files': {
                   'dev/index.html': ['src/index.html.tpl']
               }
           },
           'prod': {
               'options': {
                   'data': {
                       'title': 'I <3 JS in prod'
                   }
               },
               'files': {
                   'dist/index.html': ['src/index.html.tpl']
               }
           }
       }
   });
   grunt.loadNpmTasks('grunt-template');
   grunt.registerTask('default', [
       'template:prod'
   ]);
   grunt.registerTask('dev', [
       'template:dev'
   ]);
};

grunt-include-replace 做的事情比较相似，只是模板字符串的格式不同 (@@title)。

发布

暂无评论

创作场景

环境特定的构建工具：Grunt、Gulp 和 Broccoli

最简单的选项—字符串/ 正则表达式替换

条件注释

HTML 中的模板变量

评论

《架构师训练营》第9周总结

架构师训练营第九周作业

第九周学习总结

架构师训练营第九周总结

第9周作业

HTTP历史-进化过程

JVM 垃圾回收原理

JVM原理

JVM 垃圾回收原理及秒杀系统设计思路

第九周命题作业

8.5小结

Week09总结

Week 9 作业

秒杀

week09 作业

性能优化总结

第 09 周作业

9-1垃圾回收原理和秒杀系统

9-2 秒杀系统的挑战和问题

Week 09 作业

笨人和笨办法

week09作业

Week9-课后总结 & 课后作业 JVM垃圾回收机制

第九周总结

架构师训练营 W9 作业

秒杀系统

架构师训练营 W9 心得

如何设计一个秒杀系统

week09总结

架构师培训 -08 总结 JVM、秒杀

week09 小结


	module.exports = function(grunt) {
	grunt.initConfig({
	'string-replace': {
	prod: {
	src: './app/*/.html',
	dest: './dist/',
	options: {
	replacements: [{
	pattern: 'source.js',
	replacement: 'build.js'
	}]
	}
	}
	}
	});
	grunt.loadNpmTasks('grunt-string-replace');
	grunt.registerTask('default', ['string-replace']);
	};


	Dev：
	<!--(if target dev)><!-->
	<link rel="stylesheet" href="dev.css" />
	<!--<!(endif)-->
	<!--(if target dev)><!-->
	<script src="dev.js"></script>
	<script>
	var less = { env:'development' };
	</script>
	<!--<!(endif)-->
	Production：
	<!--(if target prod)><!-->
	<link rel="stylesheet" href="release.css">
	<!--<!(endif)-->
	<!--(if target prod)><!-->
	<script src="release.js"></script>
	<!--<!(endif)-->


	Dev：
	<!-- @if NODE_ENV='production' -->
	<link rel="stylesheet" href="dev.css">
	<!-- @endif -->
	<!-- @if NODE_ENV='production' -->
	<script src="dev.js"></script>
	<script>
	var less = { env:'development' };
	</script>
	<!-- @endif -->

	Production：
	<!-- @if NODE_ENV='production' -->
	<link rel="stylesheet" href="release.css">
	<!-- @endif -->
	<!-- @if NODE_ENV='production' -->
	<script src="release.js"></script>
	<!-- @endif -->


	<!-- build:[class]:dist production -->
	<html class="debug_mode">
	<!-- /build -->


	<!-- build:include:dev dev/content.html -->
	This will be replaced by the content of dev/content.html
	<!-- /build -->


	<!-- build:remove -->
	<p>This will be removed when any processhtml target is done</p>
	<!-- /build -->
	<!-- build:remove:dist -->
	<p>But this one only when doing processhtml:dist target</p>
	<!-- /build -->


	Gruntfile：
	Devcode：
	{
	options :
	{
	html: true, // html files parsing?
	js: true, // javascript files parsing?
	css: true, // css files parsing?
	clean: true,
	block: {
	open: 'condition', // open code block
	close: 'conditionend' // close code block
	},
	dest: 'dist'
	},
	Markup：
	<!-- condition: !production -->
	<li class="right">
	<a href="#settings" data-toggle="tab">
	Settings
	</a>
	</li>
	<!-- conditionend -->


	index.html.tpl

	Gruntfile.js
	module.exports = function(grunt) {
	grunt.initConfig({
	'template': {
	'dev': {
	'options': {
	'data': {
	'title': 'I <3 JS in dev'
	}
	},
	'files': {
	'dev/index.html': ['src/index.html.tpl']
	}
	},
	'prod': {
	'options': {
	'data': {
	'title': 'I <3 JS in prod'
	}
	},
	'files': {
	'dist/index.html': ['src/index.html.tpl']
	}
	}
	}
	});
	grunt.loadNpmTasks('grunt-template');
	grunt.registerTask('default', [
	'template:prod'
	]);
	grunt.registerTask('dev', [
	'template:dev'
	]);
	};

创作场景

环境特定的构建工具：Grunt、Gulp 和 Broccoli

最简单的选项—字符串/ 正则表达式替换

条件注释

HTML 中的模板变量

评论

更多内容推荐

推荐阅读

电子书

大厂实战PPT下载