Gulp任务未正常运行

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文件

你用的是什么版本的酒？版本4您使用的是npm和node的哪些版本？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 glob的开头缺少一个正斜杠，应该变成：

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

请注意，我添加了一条return语句来向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'));