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和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开头的开头缺少正斜杠，应该变成：

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

Gulp任务无法正常运行

1 个答案: