Question

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

将Sass文件作为源（例如src / scss / main.scss）
使用“ postcss-sorting”对CSS属性进行排序
将源文件覆盖到相同路径（例如src / scss / main.scss）
获取排序的scss文件并编译为css
写入css文件夹（例如dist / css）

我尝试编写此任务，但是当我开始观看scss文件更改时，任务具有无限循环。我也尝试了2种不同的任务（一种用于排序CSS属性和写入文件，另一种用于编译和写入），它仍然循环运行。我不想只排序CSS文件中的CSS属性，我也想排序我的CSS文件。那是我的示例代码：

// 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);
}

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

1 个答案: