Gulp任务运行不正常

Posted 2021-04-20

一点上下文：我正在学习本教程：在时间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
eactTutorialpersonal-websitesrcgulpfile.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'

答案

你很近。 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.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'));