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

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

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

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


gulp gulp-watch gulp-rename gulp-rev
person Nikunj Chotaliya    schedule 28.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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-watch можно использовать таким образом, поскольку я никогда не использовал его таким образом, но при запуске gulp watch задача зависала и не завершалась.

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

person Santiago Ramirez    schedule 28.06.2017