Задание глотка не выполняется должным образом

Question

Небольшой контекст: я следую этому уроку: и в 23:20 мы создали файл gulpfile.js, который возьмет файл scss и преобразует его в css.Поскольку мне нужно было изменить код на Gulp 4, вот мой код:

'use strict';

//Dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');



////////////////////
// - SCSS/CSS
////////////////////

var SCSS_SRC = '.src/Assets/Assets/*.scss';
var SCSS_DEST = './src/Assets/css';

//Compile SCSS
gulp.task('compile_scss', gulp.series(function(){
  gulp.src(SCSS_SRC)
  .pipe(sass().on('error', sass.logError))
  .pipe(minifyCSS())
  .pipe(rename({ suffix: '.min' }))
  .pipe(changed(SCSS_DEST))
  .pipe(gulp.dest(SCSS_DEST));
}));

//Detect changes in SCSS
gulp.task('watch_scss', gulp.series(function(){
  gulp.watch(SCSS_SRC, gulp.series(['compile_scss']))
}));


//Run tasks
gulp.task('default', gulp.series(['watch_scss']));

Чего вы ожидали?Я ожидаю, что он создаст файл CSS по соответствующему пути.

Что на самом деле произошло?Файл CSS не создан

Какую версию gulp вы используете?версия 4 Какие версии npm и узла вы используете?npm: 6.4.1 Узел: v10.15.1

Когда я запускаю команду gulp в своем проекте, я получаю следующее:

[21:35:41] Using gulpfile ~\Desktop\reactTutorial\personal-website\src\gulpfile.js
[21:35:41] Starting 'default'...
[21:35:41] Starting 'watch_scss'...
[21:35:41] Starting '<anonymous>'...```

I assume its running right but it doesnt seem like its actually able to access the 'compile_scss'

Answer 1

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

var SCSS_SRC = './src/Assets/Assets/*.scss';

Этого достаточно, чтобы заставить его работать.Однако есть и другие улучшения, которые вы можете сделать.Некоторые варианты использования gulp.series являются избыточными, хотя не являются строго неправильными.Ваша задача compile_scss, например, может быть упрощена до:

gulp.task('compile_scss', function() {
  return gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));
});

Обратите внимание, что я добавил инструкцию возврата, чтобы сигнализировать о завершении задачи в gulp.

При перечислении задач в gulp.seriesВы также можете потерять скобки:

gulp.task('default', gulp.series('watch_scss'));

Сложив все вместе, вы получите:

'use strict';

//Dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

////////////////////
// - SCSS/CSS
////////////////////

var SCSS_SRC = './src/Assets/Assets/*.scss';
var SCSS_DEST = './src/Assets/css';

//Compile SCSS
gulp.task('compile_scss', function() {
  return gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));
});

//Detect changes in SCSS
gulp.task('watch_scss', function() {
  gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});

//Run tasks
gulp.task('default', gulp.series('watch_scss'));