javascript 在 Gulp 中使用变量作为目标文件名？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22512813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using variables in Gulp for the destination file name?
提问by Vardumper
I am new to gulp and I am wondering if what I want to achieve is practical or possible.
我是 gulp 的新手，我想知道我想要实现的目标是否可行或可能。
My projects structure:
我的项目结构：
root
|
components
| |
| component_1
| | styles.scss
| | actions.js
| | template.html
| | ...
| component_2
| | styles.scss
| | template.html
| | ...
|
public
|
assets
|
css (dest)
| component_1.css
| component_2.css
| ...
js (dest)
Now what I want is that Gulp stores the compiled css files in the according css folder in public/assets but uses the name of folder where it found the scss file. Is that possible? Do I need to pipe that to a plugin? Thanks! PS i do realize I could achieve that by just renaming the scss, but that's what I'd like to avoid.
现在我想要的是 Gulp 将编译后的 css 文件存储在 public/assets 中相应的 css 文件夹中，但使用它找到 scss 文件的文件夹的名称。那可能吗？我需要将它通过管道传输到插件吗？谢谢！PS我确实意识到我可以通过重命名scss来实现这一点，但这是我想避免的。
回答by OverZealous
It wouldn't be too hard, depending on how much you need it to be dynamic. Gulp is pure JS, so you can very easily write your own functions. you can use the gulp-renamepluginto rename part or all of the file name before saving.
这不会太难，这取决于您需要多少动态。Gulp 是纯 JS，因此您可以非常轻松地编写自己的函数。您可以在保存之前使用该gulp-rename插件重命名部分或全部文件名。
Here's a rough idea to get you started:
这是一个让您入门的粗略想法：
var rename = require('gulp-rename'),
path = require('path'),
glob = require('glob'); // npm i --save-dev glob
var components = glob.sync('components/*').map(function(componentDir) {
return path.basename(componentDir);
});
components.forEach(function(name) {
gulp.task(name+'-style', function() {
return gulp.src('components/'+name+'/styles.scss')
.pipe(sass()) // etc
.pipe(rename(name + '.css'))
.pipe(gulp.dest('public/assets/css'))
});
gulp.task(name+'-js', function() {
// similar idea for JS files
});
gulp.task(name+'-build', [name+'-style', name+'-js']);
});
// build all components
gulp.task('build-components', components.map(function(name){ return name+'-build'; }));
Now you'll have tasks named component_1-build, component_1-style, component_1-js, etc, for each component.
您现在有任务命名component_1-build，component_1-style，component_1-js，等，为每个组件。
You also have a task that can build all components.
您还有一个可以构建所有组件的任务。
回答by alfonsob
Old question i know, but i been playing around in this area today, and hence came across this question. This may help someone if you are wanting to do something dynamic with the destination path.
我知道老问题，但我今天一直在这个领域玩，因此遇到了这个问题。如果您想对目标路径做一些动态的事情，这可能会对某人有所帮助。
You can supply a function as the argument to gulp.dest and hence do some pre processing on the destination path like this:
您可以提供一个函数作为 gulp.dest 的参数，因此对目标路径进行一些预处理，如下所示：
.pipe(gulp.dest(function (file) {
// file is the current file in the stream
// do something here
return pathString;
}));
