blocks|key|125024|text|正如您所怀疑的那样，您把事情搞得太复杂了。目的地不需要是动态的，因为全局路径也用于dest。只需通过管道将src添加到与src相同的基目录，在本例中为"sass"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|125025|gulp.src("sass/**/*.scss")
++.pipe(sass())
++.pipe(gulp.dest("sass"));|code-block|syntax|javascript|125026|如果您的文件没有公用库，并且您需要传递路径数组，则这是不够的。在这种情况下，您需要指定基本选项。|125027|var+paths+=+[
++"sass/**/*.scss",+
++"vendor/sass/**/*.scss"
];
gulp.src(paths,+{base:+"./"})
++.pipe(sass())
++.pipe(gulp.dest("./"));|125028|entityMap^0|15|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

As you suspected, you are making this too complicated. The destination doesn't need to be dynamic as the globbed path is used for the <code>dest</code> as well. Simply pipe to the same base directory you're globbing the src from, in this case "sass":

<pre><code>gulp.src("sass/**/*.scss")
 .pipe(sass())
 .pipe(gulp.dest("sass"));
</code></pre>

If your files do not have a common base and you need to pass an array of paths, this is no longer sufficient. In this case, you'd want to specify the base option.

<pre><code>var paths = [
 "sass/**/*.scss", 
 "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
 .pipe(sass())
 .pipe(gulp.dest("./"));
</code></pre>

blocks|key|125037|text|这比numbers1311407所领导的要简单。您根本不需要指定目标文件夹，只需使用.即可。另外，一定要设置基目录。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|125038|gulp.src("sass/**/*.scss",+{+base:+"./"+})
++++.pipe(sass())
++++.pipe(gulp.dest("."));|code-block|syntax|javascript|125039|entityMap^0|16|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This is simpler than numbers1311407 has led on. You don't need to specify the destination folder at all, simply use <code>.</code>. Also, be sure to set the base directory.

<pre><code>gulp.src("sass/**/*.scss", { base: "./" })
 .pipe(sass())
 .pipe(gulp.dest("."));
</code></pre>

blocks|key|125077|text|gulp.src("sass/**/*.scss")
++.pipe(sass())
++.pipe(gulp.dest(function(file)+{
++++return+file.base;
++}));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|125078|这里给出了最初的答案：https://stackoverflow.com/a/29817916/3834540。|unstyled|offset|length|125079|我知道这个帖子很旧，但它仍然是谷歌上的第一个结果，所以我想我还是把这个链接贴在这里吧。|125080|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/29817916/3834540^0|0|B|18|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@$G|U|H|V|1|W]]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>gulp.src("sass/**/*.scss")
 .pipe(sass())
 .pipe(gulp.dest(function(file) {
 return file.base;
 }));
</code></pre>

Originally answer given here: <a href="https://stackoverflow.com/a/29817916/3834540">https://stackoverflow.com/a/29817916/3834540</a>. 

I know this thread is old but it still shows up as the first result on google so I thought I might as well post the link here.

blocks|key|125085|text|这是非常有帮助的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|125086|gulp.task("default",+function(){

++++//sass
++++gulp.watch([srcPath+%2B+'.scss',+'!'%2B+srcPath+%2B'min.scss']).on("change",+function(file)+{
+++++++++console.log("Compiling+SASS+File:+"+%2B+file.path)
+++++++++return+gulp.src(file.path,+{+base:+"./"+})
++++++++.pipe(sass({style:+'compressed'}))
++++++++.pipe(rename({suffix:+'.min'}))
++++++++.pipe(sourcemaps.init())
++++++++.pipe(autoprefixer({
++++++++++++browsers:+['last+2+versions'],
++++++++++++cascade:+false
++++++++}))
++++++++.pipe(sourcemaps.write('./'))+++++++++
++++++++.pipe(gulp.dest("."));+
++++});

++++//scripts
++++gulp.watch([srcPath+%2B+'.js','!'%2B+srcPath+%2B+'min.js']).on("change",+function(file)+{
++++++++console.log("Compiling+JS+File:+"+%2B+file.path)
++++++++gulp.src(file.path,+{+base:+"./"+})
++++++++.pipe(uglify())
++++++++.pipe(rename({suffix:+'.min'}))+++++++
++++++++.pipe(gulp.dest("."));+
++++});
})|code-block|syntax|javascript|125087|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This was very helpful!

<pre><code>gulp.task("default", function(){

 //sass
 gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
 console.log("Compiling SASS File: " + file.path)
 return gulp.src(file.path, { base: "./" })
 .pipe(sass({style: 'compressed'}))
 .pipe(rename({suffix: '.min'}))
 .pipe(sourcemaps.init())
 .pipe(autoprefixer({
 browsers: ['last 2 versions'],
 cascade: false
 }))
 .pipe(sourcemaps.write('./')) 
 .pipe(gulp.dest(".")); 
 });

 //scripts
 gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
 console.log("Compiling JS File: " + file.path)
 gulp.src(file.path, { base: "./" })
 .pipe(uglify())
 .pipe(rename({suffix: '.min'})) 
 .pipe(gulp.dest(".")); 
 });
})
</code></pre>

blocks|key|125117|text|如果要将所有文件保存在dist文件夹中各自的路径中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|125118|const+media+=+()+=>+{
++++return+gulp.src('./src/assets/media/**/*')
++++++++.pipe(gulp.dest(file+=>+file.base.replace('src',+'dist'))
++++)
}

const+watch+=+()+=>+{
++gulp.watch(
++++"./src/**/*",
++++media
++);
};|code-block|syntax|javascript|125119|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if you want to save all files in their own path in the dist folder
<pre><code>const media = () =&gt; {
 return gulp.src('./src/assets/media/**/*')
 .pipe(gulp.dest(file =&gt; file.base.replace('src', 'dist'))
 )
}

const watch = () =&gt; {
 gulp.watch(
 &quot;./src/**/*&quot;,
 media
 );
};
</code></pre>

I have a gulp task that is attempting to convert .scss files into .css files (using gulp-ruby-sass) and then place the resulting .css file into the same place it found the original file. The problem is, since I'm using a globbing pattern, I don't necessarily know where the original file is stored. 

In the code below I'm trying to use gulp-tap to tap into the stream and figure out the file path of the current file the stream was read from:

<pre><code>gulp.task('convertSass', function() {
 var fileLocation = "";
 gulp.src("sass/**/*.scss")
 .pipe(sass())
 .pipe(tap(function(file,t){
 fileLocation = path.dirname(file.path);
 console.log(fileLocation);
 }))
 .pipe(gulp.dest(fileLocation));
});
</code></pre>

Based on the output of the <code>console.log(fileLocation)</code>, this code seems like it should work fine. However, the resulting CSS files seem to be placed one directory higher than I'm expecting. Where it should be <code>project/sass/partials</code>, the resulting file path is just <code>project/partials</code>. 

If there's a much simplier way of doing this, I would definitely appreciate that solution even more. Thanks!

Modify file in place (same dest) using Gulp.js and a globbing pattern

文件存储

我有一个gulp任务，它尝试将.scss文件转换为.css文件(使用gulp-ruby-sass)，然后将生成的.css文件放入找到原始文件的相同位置。问题是，因为我使用的是全局模式，所以我不一定知道原始文件存储在哪里。在下面的代码中，我尝试使用gulp-tap进入流，并找出从其中读取流的当前文件的文件路径：gulp....

问使用Gulp.js和全局模式就地修改文件(相同的dest)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Gulp.js和全局模式就地修改文件(相同的dest)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Gulp.js和全局模式就地修改文件(相同的dest)
EN