管理 gulp 不同环境不同的文件和路径

【问题标题】：Manage gulp different environment different files and path管理 gulp 不同环境不同的文件和路径
【发布时间】：2018-04-20 06:39:59
【问题描述】：

在我的正常流程中，我包含了两个 css

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="external.css">

我没有使用 gulp，而是将这两者合并并将其缩小为 res_style.css，因此它应该包含

<link rel="stylesheet" href="build/res_style.css">

但我希望在开发环境中它应该只包含两个文件 (style.css,external.css)，而在生产环境中它应该包含 res_style.css。 gulp 有什么办法可以根据环境自动处理这个问题吗？

【问题讨论】：

标签： gulp

【解决方案1】：

您可以使用yargs

在推荐行中，您可以添加例如：gulp --env development

在 gulp 配置中：

var argv = require('yargs').argv;
console.log(argv.env);
if (argv.env === 'developmenet') {
    // generate 2 css file
} else {
    // generate 1 css file
}

使用 gulp src 替换 html 文件中的文本。

var src =  path.join('index.html');
var dest =  path.join('build/index.html');

gulp.src(src)
    .pipe(replace('<link rel="stylesheet" href="style.css">', ''))
    .pipe(replace('<link rel="stylesheet" href="external.css">', '<link rel="stylesheet" href="build/res_style.css">'))
    .pipe(gulp.dest(dest));

【讨论】：

生成不是问题，我想在我包含此 css 的 index.html 文件中的文件中将其自动化。
这可能与 gulp 注入有关。只需提及评论和文件，它就会被附加。