gulp.js 去除输出文件的相对路径

Posted

技术标签:

【中文标题】gulp.js 去除输出文件的相对路径【英文标题】:gulp.js strips relative paths of output files [duplicate] 【发布时间】:2014-03-04 08:13:03 【问题描述】:

我设置了一个 gulp.js 配置,以便在保存时自动编译我的 SASS 和 CoffeeScript。它可以工作,只是相对路径完全丢失,所有文件都输出到一个平面目录中。我想在编译最终的 CSS 和 JS 文件时保留我的 app/assets/sassapp/assets/coffee 目录的子目录结构。这是我的 gulpfile:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');

var sassDir = 'app/assets/sass';
var coffeeDir = 'app/assets/coffee';

gulp.task('sass', function() 
    return gulp.src(sassDir + '/**/*.scss')
        .pipe(plumber())
        .pipe(sass( style: 'compress' ).on('error', gutil.log))
        .pipe(autoprefixer('last 10 versions'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'));
);

gulp.task('coffee', function() 
    return gulp.src(coffeeDir + '/**/*.coffee')
        .pipe(plumber())
        .pipe(coffee( bare: true ).on('error', gutil.log))
        .pipe(gulp.dest('public/js/coffee)'));
);

gulp.task('watch', function() 
    gulp.watch(sassDir + '/**/*.scss', ['sass']);
    gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
);


gulp.task('default', ['sass', 'coffee', 'watch']);

【问题讨论】:

请查看现有答案here 和here。 当我注释掉 .src 和 .dest 之间的所有管道时, base: '...' 解决方案有效,但添加 sass() 步骤会产生同样的问题。跨度> 那么gulp-sass 插件可能正在从源文件中删除或修改relative 属性。我不使用那个插件,所以我不确定。您可以使用gulp-debug plugin 查看您的文件发生了什么。 【参考方案1】:

只用 / 分割路径字符串,并得到最后一个是文件名和扩展名,然后剪切它 获取文件路径

gulp.task('testing', function() 
        var orginalFile="tt/ee/style.scss";

        var pathArray=orginalFile.split('/');
        var destination=orginalFile.replace(pathArray[pathArray.length-1],"")

    gulp.src(orginalFile)    
    .pipe(sass())
    .pipe(gulp.dest(destination));

    )
);

【讨论】:

以上是关于gulp.js 去除输出文件的相对路径的主要内容,如果未能解决你的问题,请参考以下文章

node.js中static相对路径怎么写

从零开始的Java开发1-6-4 Java输入输出流:File类绝对路径和相对路径字节流缓冲流字符流对象序列化

Visual Studio 2010 发布具有相对路径的配置文件目标位置

什么是文件的相对路径?怎么把文件路径改为相对路径?

(git) diff 输出相对路径?

url-loader / file-loader 使用 webpack 破坏 css 输出中的相对路径