Gulp Watch не работает в gulp 4.0.2, пока не запустится gulp - PullRequest
Новая
       80

Gulp Watch не работает в gulp 4.0.2, пока не запустится gulp

1 голос
/ 12 февраля 2020

В моем заливе. js, я использую часы для компиляции файлов css в css файлов. Он работает без ошибок, и когда я запускаю gulp в powershell, он говорит, что наблюдает, но всякий раз, когда я определяю стиль в своем файле css, он не влияет на файл css, который создается, и мне приходится остановить глоток и запустить его снова. На самом деле, это не смотрит внимательно! Вот мой код Спасибо за любую помощь. 

"use strict";

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");
var { task, series } = require("gulp");

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


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


task("watch_scss", function() {
	gulp.watch(SCSS_SRC, series(["compile_scss"]));
});

task("default", series("watch_scss"));

Ответы [ 2 ]

2 голосов
/ 12 февраля 2020

Вы пропустили возврат. Глоток не знает, что задание выполнено. В вашем случае вы должны вернуть поток. Вот как должен выглядеть ваш код: 

"use strict";

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");
var { task, series } = require("gulp");

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

function compile_scss() {
    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)); 
}


function watch_scss() {
    gulp.watch(SCSS_SRC, series(compile_scss));
}

exports.default = series(watch_scss);

Я также позволил себе удалить "task ()" с

Напоминание: этот API не рекомендуется шаблон больше - экспортируйте свои задачи.

как сказано здесь .

1 голос
/ 14 февраля 2020

Для решения проблемы, как упомянул @Gabriel и согласно этой ссылке , я изменил свой код на этот, и проблема решена. Но когда я запустил npm start, часы перестали работать; Поэтому я установил «одновременно» через npm и изменил свой запуск в пакете. json как упомянуто здесь: 

npm install concurrently

"start": "concurrently \"react-scripts start \" \"gulp \"",

"use strict";

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");
var { task, series } = require("gulp");

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


function compile_scss() {
	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));
}

function watch_scss() {
	gulp.watch(SCSS_SRC, series(compile_scss));
}

exports.default = series(watch_scss);
...