在Gulp中使用变量作为目标文件名？ [英] Using variables in Gulp for the destination file name?

问题描述

我的项目结构：

  root 
 | 
组件
 | | 
 | component_1 
 | | styles.scss 
 | | actions.js 
 | | template.html 
 | | ... 
 | component_2 
 | | styles.scss 
 | | template.html 
 | | ... 
 | 
 public 
 | 
资产
 | 
 css（dest）
 | component_1.css 
 | component_2.css 
 | ... 
 js（dest）
  

现在我想要的是Gulp存储编译公共/资产的相应css文件夹中的css文件，但使用找到scss文件的文件夹的名称。那可能吗？我需要将其插入到插件中吗？
谢谢！
PS我知道我可以通过重命名scss来达到目的，但这正是我想避免的。

这不会太难，取决于你需要多少动态。 Gulp是纯JS，所以你可以很容易地编写自己的函数。您可以使用 gulp-rename 插件重命名部分或者保存之前的所有文件名。

以下是您开始使用的一个粗略的想法：

  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） ; 
}）; 
 $ b $ 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（）{
 //类似的JS文件的想法
 
 
 $ gulp.task（name +' -  build'，[name +' -  style'，name +' -  js']）; 
}）; 
 $ b $ //构建所有组件
 gulp.task（'build-components'，components.map（function（name）{return name +' -  build';}））; 
  

现在您将拥有名为 component_1-build ， component_1样式， component_1-js 等。



您还有一项任务可以构建所有组件。

I am new to gulp and I am wondering if what I want to achieve is practical or possible.

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.

解决方案

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-rename plugin to rename part or all of the file name before saving.

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.

You also have a task that can build all components.

这篇关于在Gulp中使用变量作为目标文件名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！