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

编程入门 行业动态 更新时间:2024-10-05 01:15:00

如何覆盖文件<a href=https://www.elefans.com/category/jswz/34/1771370.html style=并在同一个gulp任务中使用该文件?"/>

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

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

  1. 把Sass文件作为一个源文件(例如:srcscssmain.scss)
  2. 用 "postcss-sorting "对css属性进行排序。
  3. 覆盖源文件到同一路径 (例如:srcscssmain.scss)
  4. 将整理好的scss文件编译成css。
  5. 写入css文件夹(如:distcss)

我试着写这个任务,但当我开始观察scss文件的变化时,任务有无限循环。我也尝试了2个不同的任务(一个是排序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);

谁能帮我解决这个问题?谅谅

P.S. 对不起,我所有的语法错误,英语不是我的母语。

回答如下:

你可以使用"... "来排序css属性。囫囵吞枣只有当文件有变化时,它才会覆盖文件,防止无限循环。

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: changedpareContents}))
        .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任务中使用该文件?

本文发布于:2024-05-13 12:38:17,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1759550.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:并在   该文件   文件   gulp

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!