如何覆盖文件并在同一个gump任务中使用该文件

Question

我甚至不知道如何在标题中简要解释我的问题。我想创建将遵循以下步骤的任务：

1. 以Sass文件为源(例如src/scss/main.scss(
2. 使用"postpass排序"对css属性进行排序
3. 将源文件覆盖到相同的路径(例如src/scss/main.scs(
4. 获取排序后的scss文件并编译为css
5. 写入css文件夹(Ex.dist/css(

我试着写这个任务，但当我开始观察scss文件的变化时，任务有无限循环。我也尝试了两个不同的任务(一个用于排序css属性和写入文件，另一个用于编译和写入(，它仍然在循环。我不想只对css文件中的css属性进行排序，我也想对我的scss文件进行排序。这是我的示例代码：

// Load plugins
const {gulp, watch, src, dest, series} = require( 'gulp' ),
browserSync = require('browser-sync').create(),
postcss = require( 'gulp-postcss' ),
sortProperties = require( 'postcss-sorting' ),
sassParser = require( 'postcss-scss' ),
sass = require( 'gulp-sass' );

// Load CSS property orders for 'postcss-sorting'
const propertySortOrder = require('./propertySortOrder');

// Style
const style = () => {
return src('src/scss/**/*.scss')
.pipe(
postcss([sortProperties(propertySortOrder)], {
syntax: sassParser,
})
)
.pipe(dest('src/scss'))
.pipe(sass().on('error', sass.logError))
.pipe(dest('src/css'))
.pipe(browserSync.stream());
}
// Start Server
const startServer = (done) => {
browserSync.init({
server: { baseDir: './' },
injectChanges: true
});
done();
}
// Watch File Changes
const watchFileChanges = (done) => {
watch('src/scss/**/*.scss', style);
done();
}
exports.start = series(startServer, watchFileChanges);

有人能帮我解决这个问题吗？感谢

附言很抱歉我犯了所有语法错误，英语不是我的母语。

Answer 1

您可以使用gulp-changed，只有在发生更改时，它才会覆盖文件，防止无限循环：

const changed = require('gulp-changed');
const clone = require( 'gulp-clone' );
const merge = require('merge-stream');

// Style
const style = () => {
const sortedCssPipe = src('src/scss/**/*.scss')
.pipe(
postcss([sortProperties(propertySortOrder)], {
syntax: sassParser,
})
);
const scssPipe = sortedCssPipe
.pipe(clone())
.pipe(changed('src/scss', {hasChanged: changed.compareContents}))
.pipe(dest('src/scss'));
const cssPipe = sortedCssPipe
.pipe(sass().on('error', sass.logError))
.pipe(dest('src/css'))
.pipe(browserSync.stream());
return merge(scssPipe, cssPipe);
}