标签: gulp-rename

假设我有一个像这样的LESS CSS目录结构:

less/
    core/
        _main.less
        header.less
        body.less
        footer.less
    contact/
        _main.less
        form.less
        details.less

我想编写一个Gulp任务,它将_main.less在less/dir的每个子目录中查找文件,将其传递给gulp-less并将输出写入css/dir,如下所示:

css/
    core.css
    contact.css

因为_main.less包含其目录中的其他文件,只_main.less需要解析文件,但我希望输出文件具有其所在目录的名称.

到目前为止我有这个:

gulp.src('less/*/*/_main.less')
    .pipe(less())
    .pipe(gulp.dest('css'));

但是这将创建一个这样的目录结构:

css/
    core/
        _main.css
    contact/
        _main.css

但这不是我想要的.我正在考虑使用正则表达式匹配目录名称,将其返回到matchesvar中,并相应地重命名该文件.像这样的东西:

gulp.src(/less\/[^\/]+\/([^\/]+)\/_main.less/)
    .pipe(less())
    .pipe(rename(function(context) {
        context.src.matches[1] + '.css'
     }))
    .pipe(gulp.dest('css'));

这段代码只是一个例子.我无法弄清楚如何做这样的事情,或者甚至可能.

这可能吗？如果是这样,怎么样？

我正在尝试创建一个gulp任务来同时压缩和创建源映射.压缩和源映射创建工作,但我似乎无法弄清楚如何在使用gulp-rename插件时正确获取输出名称.

为了简化:我source.js在/src文件夹中有一个文件,我想在文件夹中创建.min.js和.js.map文件/dist.

这就是我所拥有的:

gulp.task('scripts', function () {

// compressed
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist'));
});

这适用于它在以下方面创建以下内容/dist:

• jquery-resizable.min.js (所有好的 - 压缩,地图参考和正确的名称)
• jquery-resizable.js.min.map (地图在那里,但名字不好 - 应该是jquery-resizable.js.map)

我已经尝试了大量的变化,但我无法弄清楚如何获得地图和压缩来构建并获得正确的文件名.

我也试过在一个单独的步骤中重命名文件,但由于gulp的异步性质,这不能可靠地工作 - 有时它有效它不会这样看起来也不是一个选项.

我错过了什么？

我没有以这种方式创建源图,但是这样做的正确方法是什么？我看到的所有示例似乎都按照上面的操作执行,除非它们不将输出文件重命名为min.js,这似乎是该过程的重要部分.

我需要制作不同分辨率的图像版本.但是,我的gulp代码输出很乱 - 有些文件丢失,有些图片以不同的文件名保存.我知道它与异步执行有关,但我并不熟悉node.js,所以我不知道如何解决它.任何帮助表示赞赏,特别是有解释.

var gulp        = require('gulp');
var rename      = require('gulp-rename');
var gm = require('gulp-gm');
var originalBasename = '';

    gulp.task('resize-all', function () {
      return gulp.src(['_img/**/*.{jpg,png}', '_img/*.{jpg,png}'])
      .pipe(rename(function (path) {
        originalBasename = path.basename;
        path.basename += "-2048";
      }))
      .pipe(gm(function (gmfile) {
        return gmfile.resize(2048, 5000);
      }))
      .pipe(gulp.dest('_site/img'))
      .pipe(rename(function (path) {
        path.basename = originalBasename; // restore basename
        path.basename += "-1536";
      }))
        .pipe(gm(function (gmfile) {
          return gmfile.resize(1536, 5000);
        }))
        .pipe(gulp.dest('_site/img'))
        .pipe(rename(function (path) {
          path.basename = originalBasename; // restore basename
          path.basename += "-1080";
        }))
        .pipe(gm(function (gmfile) …

我的gulp文件看起来像:

function aureliaJsonPath(name) {
    return `./aurelia_project/aurelia.${name}.json`;
}

gulp.task('use-login-au-json', () => {
    return gulp.src(aureliaJsonPath('login'))
        .pipe(rename('aurelia.json'))
        .pipe(gulp.dest('./aurelia_project'));
});

[11:59:18]错误:EISDIR:对目录进行非法操作,打开'... base directory ...\aurelia_project\aurelia.json'

基本上,我有一个目录aurelia.login.json,我想aurelia.json在同一目录中复制和重命名.

我正在使用gulp-rename如下重命名目录:

gulp.task('vendor-rename-pre', function() {
  return gulp.src('src/vendor')
    .pipe(rename('vendor-dev'))
    .pipe(gulp.dest('src'));
});

但是,它本质上最终会创建一个新的空目录,vendor-dev而不是重命名vendor.vendor保持原样.

那么,我怎么能用gulp实际重命名目录呢？