Как перезаписать файл и использовать этот файл в одной задаче gulp? - PullRequest
Новая
       41

Как перезаписать файл и использовать этот файл в одной задаче gulp?

0 голосов
/ 09 мая 2020

Я даже не знаю, как кратко объяснить мою проблему в заголовке. Я хочу создать задачу, которая будет выполнять следующие шаги:

  1. Взять файл Sass в качестве источника (например, src / scss / main.s css)
  2. Сортировка css свойства с 'post css -sorting'
  3. Перезаписать исходный файл по тому же пути (например, src / scss / main.s css)
  4. Взять отсортированный s css файл и компилировать в css
  5. Записывать в папку css (например, dist / css)

Я пытаюсь написать эту задачу, но когда я начинаю смотреть s css файл изменяется, задача с бесконечным l oop. Я тоже пробовал с двумя разными задачами (одна для свойств sort css и файла записи, другая для компиляции и записи), она все еще зацикливается. Я не хочу сортировать только свойства css в файле css, я хочу также отсортировать свой файл s 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);

Может ли кто-нибудь помочь мне это исправить? Спасибо

PS Извините за все грамматические ошибки, английский sh не мой родной язык.

1 Ответ

1 голос
/ 09 мая 2020

Вы можете использовать gulp-changed , он переопределит файл, только если есть изменение, предотвращая бесконечное l oop: 

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