Блог

Я использую postcss / precss с помощью gulp, чтобы преобразовать мою разметку scss в действительный css. Это мой gulpfile.js:

 var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');

gulp.task('stream', function () {
  var processors = [
    precss
  ];
    return watch('src/*.css', { ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(gulp.dest('dest'));
});

gulp.task('default', gulp.parallel('stream'));
  

Проблема в том, что он не изменяет расширения файлов, поэтому мне нужно записать scss в файлы *.css, и то, что я пытаюсь сделать, это настроить его на чтение scss из файлов *.scss и вывод css в файлы *.css. Кто-нибудь может сказать мне, как этого добиться?

Я не эксперт в этом, поэтому я просто поделюсь тем, как мы выполняем компиляцию sass.

Мы используем gulp-concat для объединения файлов в один .css файл. Ваш фрагмент gulp будет выглядеть следующим образом:

 var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');

gulp.task('stream', function () {
  var processors = [
    precss
  ];
    return watch('src/*.css', { ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(concat('FILENAME.css'))
        .pipe(gulp.dest('dest'));
});

gulp.task('default', gulp.parallel('stream'));
  

Не забудьте сначала сделать npm install --save-dev gulp-concat !