web-dev-qa-db-ja.com

Gulp v4監視タスク


Gulp v4にアップグレードしたところ、gulpfileが機能しなくなったのはなぜですか。
新しいドキュメントの新しいコードを試してみましたが、「純粋な」postcssを使用しているため、計画どおりに機能しませんでした。
私は自分の問題をググってこの質問を見つけました： Gulpエラー：監視タスクは関数でなければなりません
ただし、これも私の問題の解決策ではありませんでしたが、同じエラーメッセージ_Error: watching src/styles/**/*.scss: watch task has to be a function_が表示されます

私は現在このコードを持っています

_var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});
_

そして私が変わるとき
gulp.watch('src/styles/**/*.scss', ['styles']);
に
gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
_Starting 'default'..._を取得し、ファイルを変更した後は_Starting 'styles'..._
Gulp 3.9では、

_Starting 'default'...
Finished 'default' after 174 ms
_

そしてファイルを変更した後

_Starting 'styles'...
Finished 'styles' after 561 μs
_

私は今、さまざまなことを試しましたが、以前のように機能しません。私は今、クールな子供たちのようにwebpackに切り替えることを本当に考えています。しかし、Gulpは常に問題なく動作しました。

誰かが私が間違っていることを私に説明できますか？

npmgulppostcss
5
obencs

帰るのを忘れた...
return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
そして
return gulp.src('src/styles/main.scss')

完全なコード：

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    return gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});
7
obencs

私はこれと私自身と格闘しました。

基本的にすべてがv4.0で変更されることを知るだけで、何時間も頭痛がしました

私はこのように私のコードを実行しました、そしてそれは完全に動作します...

//Do everything once!
  gulp.task('default', function(){
    gulp.watch('src/styles/*.css', gulp.series('css')),
    gulp.watch('src/html/*.html', gulp.series('copyHTML')),
    gulp.watch('src/js/*.js', gulp.series('scripts')),
    gulp.watch('src/images/*', gulp.series('imageMIN'));
  return
});
9
RealMJDev

イベントで使用可能

function watch() {
    const watcher = gulp.watch('src/styles/**/*.scss');
    watcher.on('change', function(path, stats) {
        styles(); //styles task
    });
}

exports.default = gulp.series(watch);
1
Vlone

誰かがこれに遭遇した場合（私がしたように）、アップグレード後にGulpが機能しないことを解決しようとすると、私にとって重要なことが2つだけあることがわかりました（数百回試行した後）-

  1. パス区切り文字の「\\」はWindowsでは機能しなくなりました。 「/」が唯一の方法です。これは私にとって最も長い苦痛のポイントでした。クロスプラットフォームになるので、とにかくこの方法でそれを行う方が良いでしょう。
  2. タスクシリーズを呼び出す場合、またはpromiseを返す場合は、必ずコールバックを発行してください。いつそれが必要なのかは正確にはわかりませんでした。それはこのようなものです：
gulp.task('js', (done) => {
    gulp.src(src)
        .pipe(task())
        .pipe(task(etc))
        //etc
        .pipe(gulp.dest(dst));
    done();
});

上記の例では具体的に古いスタイルを使用して、それがどのように行うかは本当に問題ではないことを示しています。 Gulpは非常に寛容ですが、コールバックとパスに関する執事です。パスのことは実際にはchokidarまたはgulpが使用しているサブモジュールに関連していると思います。

これが誰かの痛みを救うことを願っています。

0
dgo