Как сделать минимизацию и конкатенацию различных css файлов только после преобразования s css в css с помощью gulp? - PullRequest
Новая
       4

Как сделать минимизацию и конкатенацию различных css файлов только после преобразования s css в css с помощью gulp?

0 голосов
/ 03 апреля 2020

Я пытаюсь конвертировать мои css файлы в css файл, используя gulp. После записи s css его легко конвертировать в css. Теперь я хочу уменьшить css и сохранить в другой папке, скажем, в папке «min». Внутри папки min есть и другие css файлы. Теперь я хочу объединить эти css файл в один файл и сохранить в папке 'dist'. Все хорошо работает, но во время бега глотком. Но при использовании конкатинированного файла css на моей странице html все css не приходят туда. Итак, я проверил мой скомпилированный css из s css, но последний код wring пришел туда, но не в минимизированном и конкатенированном файле. В конце я заметил, что вначале выполняется минимизированное и последовательное выполнение, а компиляция s css. Таким образом, отсутствует окончательный код css. Есть ли способ сделать это правильно?

Мой код глотка выглядит следующим образом 

var gulp = require("gulp");
var sass = require("gulp-sass");
const cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
    return gulp.src('./app/sass/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./app/css'));
});

gulp.task('minify-css', () => {
  return gulp.src('./app/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie9'}))
    .pipe(gulp.dest('./app/css/min'));
});

gulp.task('cssConcat', function() {
  return gulp.src('./app/css/min/*.css')
    .pipe(concat('all-style.min.css'))
    .pipe(gulp.dest('./app/dist/css'));
});
gulp.task('jsConcat', function() {
  return gulp.src(['./app/js/library/jQuery-3.4.1.min.js', './app/js/*.js', './app/js/script/script.js'])
    .pipe(concat('all-js.min.js'))
    .pipe(gulp.dest('./app/dist/js'));
});
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./app"
        }
    });
});

gulp.task('run', gulp.parallel('sass', 'minify-css', 'cssConcat', 'jsConcat', 'browser-sync'));

gulp.task('watch', function () {
    gulp.watch('./app/sass/*.scss', gulp.series('sass'));
    gulp.watch('./app/css/*.css', gulp.series('minify-css'));
    gulp.watch('.app/css/min/*.css', gulp.series('cssConcat'));
    gulp.watch('./app/js/*.js', gulp.series('jsConcat'));
    gulp.watch('./app', gulp.series('browser-sync'));

});

gulp.task('default', gulp.parallel('run', 'watch'));

Я приложил снимок экрана с пробежкой глотка и временем окончания

enter image description here

1 Ответ

0 голосов
/ 03 апреля 2020

Я думаю, что ваша задача css (sass, minify- css и cssConcat) не должна выполняться параллельно. То же самое относится и к JS

Попробуйте изменить эту часть 

gulp.task('run', gulp.parallel('sass', 'minify-css', 'cssConcat', 'jsConcat', 'browser-sync'));

на 

gulp.task('cssTask', gulp.series('sass', 'minify-css', 'cssConcat'));
gulp.task('run', gulp.parallel(cssTask, 'jsConcat', 'browser-sync'));

gulp.task('watch', function () {
    gulp.watch('./app/sass/*.scss', gulp.series('cssTask'));
    gulp.watch('./app/js/*.js', gulp.series('jsConcat'));
    gulp.watch('./app', gulp.series('browser-sync'));

});
...