gulp-rev 不适用于 gulp-watch答案

【问题标题】：gulp-rev not working with gulp-watchgulp-rev 不适用于 gulp-watch
【发布时间】：2017-12-01 17:03:09
【问题描述】：

以下是我的代码我的主要问题是我必须观察 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...');
});

感谢您的帮助。

【问题讨论】：

标签： gulp gulp-watch gulp-rev gulp-rename

【解决方案1】：

我做了一些测试，并且能够通过在 gulp 任务中包装 watcher.on('change)` 来让 gulp-watch 工作。它必须在 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。

【讨论】：