gulp-rev не работает с gulp-watch

Ниже приведен мой код. Моя главная проблема: я должен следить за изменениями js и css, а также на основе этого файла min генерации с правильной версией, и мой выходной каталог такой же, как и один случай.

'use strict';

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
let cleanCSS = require('gulp-clean-css');
var rev = require('gulp-rev');
var jsArr = [
    'search/media/src/js/*.js',
    //'common/media/js/*.js',
    '!search/media/src/js/*.testmin.js',
    '!search/media/src/js/*.min.js'
            // '!common/media/js/*.testmin.js',
];

var cssArr = [
    'search/media/css/*.css',
    '!search/media/css/*.testmin.css',
    '!search/media/css/*.min.css'
];


gulp.task('js', function () {
    //return gulp.src(jsArr, {base: './'})
    return gulp.src(jsArr)
            .pipe(watch(jsArr))
            .pipe(uglify())
            .pipe(rename({suffix: '.testmin'}))
            .pipe(rev())
            .pipe(gulp.dest(function (file) {
                return file.base;
            }))
            .pipe(rev.manifest({
                merge: true
            }))
            .pipe(gulp.dest('./'));
});

gulp.task('css', function () {
    //return gulp.src(cssArr, {base: './'})
    return gulp.src(cssArr)
            .pipe(watch(cssArr))
            .pipe(cleanCSS())
            .pipe(rename({suffix: '.testmin'}))
            .pipe(rev())
            .pipe(gulp.dest(function (file) {
                return file.base;
            }))
            .pipe(rev.manifest({
                merge: true
            }))
            .pipe(gulp.dest('./'));
});

gulp.task('default', ['js', 'css'], function () {
});

var watcher = gulp.watch([jsArr, cssArr], ['default']);
watcher.on('change', function (event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

Спасибо за помощь.

1 ответ

Я провел небольшое тестирование и смог заставить часы gulp работать, завернув watcher.on('change) внутри глотка Это должно быть в пределах глотка, чтобы вызвать его.

gulp.task( 'watch', function () {

    var watcher = gulp.watch( [jsArr, cssArr], ['default'] );

    watcher.on('change', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

});

Вы также можете настроить это таким образом, если хотите. Это будет смотреть задачи js и css отдельно друг от друга.

gulp.task( 'watch', function () {
    gulp.watch( jsArr, ['js'] );
    gulp.watch( cssArr, ['css'] );
});

Также вы захотите удалить pipe(watch(jsArr)) а также pipe(watch(cssArr)), Я на самом деле не уверен, можно ли использовать часы gulp таким образом, так как я никогда не использовал их таким образом, но при запуске gulp watch это приведет к зависанию задачи и ее завершению.

Чтобы начать глотать часы, запустите gulp watch в вашем терминале.

Другие вопросы по тегам