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

Question

在我的正常流程中，我有两个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。有没有什么方法可以根据环境自动处理这个？

Answer 1

您可以使用yargs

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

在gulp config中：

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));