Gulp 相当于 Grunt 的 Files.Rename答案

【问题标题】：Gulp Equivalent to Grunt's Files.RenameGulp 相当于 Grunt 的 Files.Rename
【发布时间】：2014-12-23 02:09:44
【问题描述】：

我使用 Grunt 已经有一段时间了，最近决定尝试 Gulp。我不得不说，从我目前看到的情况来看，它看起来很有希望。然而，似乎有一些在 Grunt 中很容易的事情在 Gulp 中是困难或不可能的（就像任何 2 个类似的事情一样，我想）。

其中之一是重命名目标的源文件。我承认，这是一个小众案例，但它可能非常强大。就我而言，我使用的是 g(r?)u(nt|lp)-sass。我将我的 SCSS 文件放在名称中带有“scss”的文件夹中，并且我想将它们放在以“css”作为文件夹之一的路径中，在“scss”文件夹所在的路径中的相同位置。

使用 Grunt，这可以通过 rename 方法在 files 对象中完成。例如：

grunt.initConfig ({
    sass: {
        move: {
            options: {
                lineNumbers: true,
                compass: true,
                cacheLocation: 'app/.cache/sass'
            },
            files: [{
                expand: true,
                cwd: 'app/modules/',
                src: '**/*.scss',
                dest: '',
                ext: '.css',
                rename: function (dest, src) {
                    return 'app/modules/' + src.replace ('scss', 'css');
                    }
            }]
        }
    }
});

require ('load-grunt-tasks')(grunt);

到目前为止，使用 Gulp，我有：

var gulp = require ('gulp');
var sourcemaps = require ('gulp-sourcemaps');
var scss = require ('gulp-sass');

gulp.task('scss:move', function () {
    return gulp.src ('app/modules/**/scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe (scss())
        .pipe (sourcemaps.write())
        .pipe(gulp.dest(**?**));
});

如何将 Gulp 中的源路径转换为目标路径，如 Grunt 中的方法 files.rename？ 我更喜欢相对简单的解决方案，如单一方法，但涉及 Gulp 的解决方案插件也不错。

【问题讨论】：

您是否尝试将文件复制到目标目录并在此过程中重命名它们，而将原始scss 文件夹留在源目录中？或者您是否尝试将scss 目录移动到源目录中的css 目录？无论哪种方式，您都希望保留目录结构，但将scss 目录重命名为css，对吗？
我想保留scss 文件夹，并在每个scss 文件夹所在的位置创建新的css 文件夹。例如，如果有一个app/scss/app.scss 文件，我想用原始Sass 编译的CSS 创建一个app/css/app.css 文件。

标签： gruntjs gulp

【解决方案1】：

所以您想在从源复制到目标时保留目录结构并将名为scss 的目录更改为css，对吗？如果是这样，您想要的是gulp-rename plugin。示例：

gulp.task('scss:move', function () {
  var base = './app/modules';

  return gulp.src(base + '/**/scss/**/*.scss')
    .pipe(rename(function (file) {
      file.dirname = path.join.apply(path,
        file.dirname.split(path.sep).map(function (seg) {
          return seg == 'scss' ? 'css' : seg;
        }));
      }))
    .pipe(gulp.dest(base));
});

您可能希望在源映射生成之后进行重命名，否则重命名的路径将用作源映射中的原始路径。目前 gulp-sass 中存在一个错误 (#158)，导致无法在 gulp-sass 之前进行重命名。

【讨论】：

我在看那个插件，但它似乎会替换文件/文件夹，而不是添加一个新的。我应该从 Gulp 的整个“做一件事并把它做好”的哲学中了解得更好。
@trysis 我根据您对输出应该去哪里的反馈更新了答案。该插件正在重命名内存中的乙烯基（虚拟）文件，而不是磁盘上的文件。所以在这种情况下，您的源文件将被保留。
@trysis base 您指的是 gulp 将 out 从 dest() 路径中删除。因此，按照您的建议将文件从./app/modules/ 移动到./。要执行您的建议，您必须通过 ./ 的 base 参数：gulp.src('./app/modules/**/scss/**/*.scss', {base: './'}).dest('./');
@trysis 啊，关于正则表达式与尾随路径段不匹配的好点。我做了一个更新来解决这个问题和 Windows 问题。
@trysis 为什么“源映射必须在重命名之前，而不是之后”？我在建议的编辑中阅读了您的解释，但我仍然不明白。 gulp.src() 将原始 Sass 文件作为 Vinyl 文件加载到内存中，无论您是否随后重命名它们（在内存中）。在将 Vinyl 文件通过管道传输到 gulp-sass 之前重命名它们有什么问题？我认为用于生成源映射的路径会成为一个问题——因此，也许你确实想在之后进行重命名（也许我的回答倒退了）。