更改Gulp中文件的目标路径 [英] Change the destination path of files in Gulp
问题描述
我试图创建一个动态的gulp任务，它将遍历所有文件和文件夹并将其编译到相应的文件夹中。
文件夹结构例如：
theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss 和 theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss 等。
并且gulp任务是
gulp.task（'modules-sass'，function（）{
return gulp.src（[
'../../framework/modules/**/ （sourceSps.init（{loadMaps：true}））
.pipe（sassGlob（））
。（例如：assets / css / scss / *。scss'
]）
.pipe （'outputStyle：'expanded'}）。on（'error'，sass.logError））
.pipe（sourcemaps.write（'。'，{$ b $ includeContent：false，
sourceRoot：function（file）{
return'../css';
}
}））
.pipe（gulp.dest（'../ .. / framework / modules'））;
}）;
结果如下：
theme / framework / modules / module-1 / assets / css / scss / scss-file-1.css
theme / framework / modules / module-1 / assets / css / scss / scss -file-1.css.map
theme / framework / modules / module-2 / assets / css / scss / scss-file-2.css
theme / framework / modules / module-2 / assets /css/scss/scss-file-2.css.map
但我想把css和map文件放在css文件夹里面，而不是放在scss里面！
另外，我尝试设置目标的绝对路径，例如
gulp.task（'theme-modules-sass'，function（）{
return gulp.src（[
'../ ../framework/modules/**/assets/css/scss/*.scss'
]）
.pipe（sourcemaps.init（{loadMaps：true}））
.pipe （sassGlob（））
.pipe（sass（{outputStyle：'expanded'}）。on（'error'，sass.logError））
.pipe（sourcemaps.write（'。'，{
includeContent：false，
酸ceRoot：函数（文件）{
返回'../css';
}）
.pipe（gulp.dest（function（file）{
var filePath = file.path;
var module = filePath.substring（ filePath.indexOf（'\\modules'），filePath.indexOf（'\\assets'））;
var moduleName = module.replace（'\\modules\\'， ''）;
return'../../framework/modules/'+moduleName+'/assets/css/';
}））;
}）;
但是，然后gulp创建里面的css文件夹完整的文件层次结构，例如
theme / framework / modules / module-1 / assets / css / module-1 / assets / css / scss / scss-file-1.css
感谢您的解答
最好的问候，
Nenad
我相信这是你想要的。 [看起来您的gulpfile.js位于modules目录中。]
// theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss
// theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss
var rename = require（gulp-rename）;
var path = require（path）;
gulp.task（'modules-sass'，function（）{
return gulp.src（[
'../../framework/modules/**/ （sourceSps.init（{loadMaps：true}））
.pipe（sassGlob（））
。（例如：assets / css / scss / *。scss'
]）
.pipe （'outputStyle：'expanded'}）。on（'error'，sass.logError））
.pipe（sourcemaps.write（'。'，{$ b $ includeContent：false，
sourceRoot：function（file）{
return'../css';
}
}））
.pipe（rename（function（file） {
//这将删除相对文件路径的最后父目录
file.dirname = path.dirname（file.dirname）;
console.log（file.dirname =+ file.dirname）;
）））
.pipe（gulp.dest（'../../ framework / modules'））;
}）; b
$ b rel =nofollow noreferrer> gulp-rename 在这里很好地工作。我最初以为这只是重命名基本名称，比如'myFile.css'，但它可以忽略基本名称，也可以操作目录路径。这是我们在这里做的。
我们通过使用file.dirname的dirname去除最后一个目录名。
I trying to create dynamic gulp task which will loop through all files and folders and concat/compile it in corresponding folders.
Folders structure are for example:
theme/framework/modules/module-1/assets/css/scss/scss-file-1.scss and theme/framework/modules/module-2/assets/css/scss/scss-file-2.scss etc.
And gulp task is
gulp.task('modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(gulp.dest('../../framework/modules'));
});
Results are:
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css.map
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css.map
But I want to put css and map files inside css folder not inside scss!
Also I tried to set absolute path for destination for example
gulp.task('theme-modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(gulp.dest(function(file){
var filePath = file.path;
var module = filePath.substring(filePath.indexOf('\\modules'), filePath.indexOf('\\assets'));
var moduleName = module.replace('\\modules\\', '');
return '../../framework/modules/'+moduleName+'/assets/css/';
}));
});
But then gulp create inside css folder full file hierarchy, example
theme/framework/modules/module-1/assets/css/module-1/assets/css/scss/scss-file-1.css
Thanks for solutions
Best regards,
Nenad
解决方案 I believe this is what you want. [It looks like your gulpfile.js is in the modules directory.]
// theme / framework / modules / module-1 / assets / css / scss / scss-file-1.scss
// theme / framework / modules / module-2 / assets / css / scss / scss-file-2.scss
var rename = require("gulp-rename");
var path = require("path");
gulp.task('modules-sass', function () {
return gulp.src([
'../../framework/modules/**/assets/css/scss/*.scss'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: function(file) {
return '../css';
}
}))
.pipe(rename(function (file) {
// this removes the last parent directory of the relative file path
file.dirname = path.dirname(file.dirname);
console.log("file.dirname = " + file.dirname);
}))
.pipe(gulp.dest('../../framework/modules'));
});
gulp-rename works nicely here. I initially thought it was just for renaming basenames, like 'myFile.css', but it can ignore basenames and just manipulate the directory path as well. Which is what we do here.
We strip off the last directory name by taking the dirname of the file.dirname.
这篇关于更改Gulp中文件的目标路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
