Question

我正在学习React开发，并且将gulp和sass用于CSS。 gulp-watch任务仅完成一次compile_scss任务并停止执行。有什么办法可以让手表始终处于活动状态？我在下面包括了代码和最终的终端输出。

我正在学习的代码是针对gulp的先前版本的。我正在使用的版本现在使用更新的语法，即gulp.series（'compile_scss'）而不是[compile_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/scss/**/*.scss';
var SCSS_DEST = './src/assets/css';

//compile SCSS
gulp.task('compile_scss', 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'));
````````````

````Terminal Output
[14:08:37] Using gulpfile ~\Desktop\rct\my-react-project\gulpfile.js
[14:08:37] Starting 'default'...
[14:08:37] Starting 'watch_scss'...
[14:08:37] Starting '<anonymous>'...
[14:08:48] Starting 'compile_scss'...
```````````

I expect the gulp-watch to always check for changes in my source.

Answer 1

每个gulp任务函数都将回调函数作为第一个参数传递给您，以通知您任务已结束。

在您的<?xml version="1.0" encoding="UTF-8"?> <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <soap:Body> <GetWorksheetDetailExtraInfoFieldsResponse xmlns="http://webservices.whitespacews.com/"> <GetWorksheetDetailExtraInfoFieldsResult> <ErrorCode>0</ErrorCode> <ErrorDescription>Success</ErrorDescription> <SuccessFlag>true</SuccessFlag> <WorksheetServiceProperties> <WorksheetServiceProperty1> <ExtensionData /> <WorksheetServiceID>42</WorksheetServiceID> <ServicePropertyID>10</ServicePropertyID> <ServicePropertyName>Job Completed</ServicePropertyName> <ServicePropertyValue>Yes</ServicePropertyValue> <ServicePropertyTypeID>4</ServicePropertyTypeID> <ServicePropertyTypeName>List</ServicePropertyTypeName> <ServicePropertyOrder>30</ServicePropertyOrder> <ForMobile>true</ForMobile> <ForPowerSuite>true</ForPowerSuite> </WorksheetServiceProperty1> <WorksheetServiceProperty2> <ExtensionData /> <WorksheetServiceID>42</WorksheetServiceID> <ServicePropertyID>15</ServicePropertyID> <ServicePropertyName>Crew Comments</ServicePropertyName> <ServicePropertyValue>Collected all items successfully</ServicePropertyValue> <ServicePropertyTypeID>7</ServicePropertyTypeID> <ServicePropertyTypeName>TextBox</ServicePropertyTypeName> <ServicePropertyOrder>5</ServicePropertyOrder> <ForMobile>true</ForMobile> <ForPowerSuite>true</ForPowerSuite> </WorksheetServiceProperty2> <WorksheetServiceProperty3> <ExtensionData /> <WorksheetServiceID>42</WorksheetServiceID> <ServicePropertyID>16</ServicePropertyID> <ServicePropertyName>Items To Be Collected</ServicePropertyName> <ServicePropertyValue>Matress, bed frame, fridge</ServicePropertyValue> <ServicePropertyTypeID>1</ServicePropertyTypeID> <ServicePropertyTypeName>String</ServicePropertyTypeName> <ServicePropertyOrder>2</ServicePropertyOrder> <ForMobile>true</ForMobile> <ForPowerSuite>true</ForPowerSuite> </WorksheetServiceProperty3> </WorksheetServiceProperties> </GetWorksheetDetailExtraInfoFieldsResult> </GetWorksheetDetailExtraInfoFieldsResponse> </soap:Body> </soap:Envelope>任务中，应通过在任务结束时进行该调用来发出异步完成信号。

compile_scss

此外，您不必将//compile SCSS gulp.task('compile_scss', function(done){ 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)) .on('end', function(error) { if (error) { // Handle errors if any } // Signal that the task is over done(); }) });任务包装在watch中。它可以（应该吗？）像这样：

gulp.series

最后，如果这些都不起作用，请尝试将//detect changes in SCSS gulp.task('watch_scss', function() { return gulp.watch(SCSS_SRC, gulp.series('compile_scss')); });选项传递给观察者：

usePolling

在某些系统中，它必须能够正常工作。您可以检查整个Chkidar API here（Chokidar是gulp用于监视文件的库）

编辑：在gulp.task('watch_scss', {usePolling: true}, function() { ...中，任务必须返回管道。

Answer 2

我在做同样的教程，这对我有用。只需返回'compile-css'函数：

'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/CLASS
/////////////////
var SCSS_SRC = './src/Assets/scss/**/*.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_SRC
gulp.task('watch_scss', function(){
  gulp.watch(SCSS_SRC,gulp.series('compile_scss'));
});

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

gulp-watch在仅检测到.scss文件中的一个更改后停止。有什么办法可以使其在此代码中运行？

2 个答案: