Gulps gulp.watch не запускается для новых или удаленных файлов?
Следующая задача Gulpjs отлично работает при редактировании файлов в глобальном совпадении:
// watch task.
gulp.task('watch', ['build'], function () {
gulp.watch(src + '/js/**/*.js', ['scripts']);
gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
gulp.watch(src + '/less/*.less', ['styles']);
gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});
// build task.
gulp.task('build', ['clean'], function() {
return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});
Однако это не работает (это не срабатывает) для новых или удаленных файлов. Я что-то упускаю?
РЕДАКТИРОВАТЬ: даже используя плагин grunt-watch, он, кажется, не работает:
gulp.task('scripts', function() {
return streamqueue(
{ objectMode: true },
gulp.src([
vendor + '/jquery/dist/jquery.min.js',
vendor + '/bootstrap/dist/js/bootstrap.min.js'
]),
gulp.src([
src + '/js/**/*.js'
]).pipe(plugins.uglify())
)
.pipe(plugins.concat(pkg.name + '.min.js'))
.pipe(gulp.dest(dest + '/js/'));
});
gulp.task('watch', ['build'], function () {
plugins.watch({glob: src + '/js/**/*.js'}, function () {
gulp.start('scripts');
});
});
РЕДАКТИРОВАТЬ: Решено, это была эта проблема. Глобусы, начинающиеся с ./ (это было значение srcКажется, не работает банкомат.
7 ответов
Изменить: видимо gulp.watch теперь работает с новыми или удаленными файлами. Это не когда вопрос был задан.
Остальная часть моего ответа остается в силе: gulp-watch обычно является лучшим решением, поскольку позволяет выполнять определенные действия только с файлами, которые были изменены, в то время как gulp.watch только позволяет выполнять завершенные задачи. Для проекта разумного размера это быстро станет слишком медленным, чтобы быть полезным.
Вы ничего не пропускаете. gulp.watch не работает с новыми или удаленными файлами. Это простое решение, предназначенное для простых проектов.
Для просмотра файлов, которые могут искать новые файлы, используйте gulp-watch плагин, который гораздо мощнее. Использование выглядит так:
var watch = require('gulp-watch');
// in a task
watch({glob: <<glob or array of globs>> })
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
gulp.start( <<task name>> );
});
Лично я рекомендую первый вариант. Это позволяет значительно быстрее обрабатывать файлы. Он отлично работает при разработке с livereload, если вы не объединяете файлы.
Вы можете свернуть свои потоки, используя мой lazypipe библиотека, или просто с помощью функции иstream-combiner как это:
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch({glob: 'src/scripts/**/*.js' })
.pipe(scriptsPipeline());
ОБНОВЛЕНИЕ 15 октября 2014
Как указывает @pkyeck ниже, по-видимому, версия 1.0 gulp-watch немного изменил формат, поэтому приведенные выше примеры должны быть:
var watch = require('gulp-watch');
// in a task
watch(<<glob or array of globs>>)
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
gulp.start( <<task name>> );
});
а также
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch('src/scripts/**/*.js')
.pipe(scriptsPipeline());
И то и другое gulp.watch() а также require('gulp-watch')() сработает для новых / удаленных файлов, однако, нет, если вы используете абсолютные каталоги. В моих тестах я не использовал "./" для относительных каталогов BTW.
Оба не сработают, если будут удалены все каталоги.
var watch = require('gulp-watch');
//Wont work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though.
//gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {
//gulp.watch('src/app1/reports/**/*', function (event) {
// console.log('*************************** Event received in gulp.watch');
// console.log(event);
// gulp.start('localDeployApp');
});
//Won't work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
//watch(config.localDeploy.path + '/reports/**/*', function() {
watch('src/krfs-app/reports/**/*', function(event) {
console.log("watch triggered");
console.log(event);
gulp.start('localDeployApp');
//});
Если src это абсолютный путь (начиная с /), ваш код не будет обнаруживать новые или удаленные файлы. Однако есть еще способ:
Вместо:
gulp.watch(src + '/js/**/*.js', ['scripts']);
записывать:
gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
и это будет работать!
Для глобусов должен быть указан отдельный базовый каталог, и это базовое местоположение не должно указываться в самом глобусе.
Если у вас есть lib/*.js, он будет смотреть под текущим рабочим каталогом, который process.cwd()
Gulp использует Gaze для просмотра файлов, и в документации по Gulp API мы видим, что мы можем передать определенные параметры Gaze функции наблюдения: gulp.watch(glob[, opts], tasks)
Теперь в документе Gaze мы можем найти, что текущий рабочий каталог (glob base dir) является cwd вариант.
Что приводит нас к ответу Алекса: gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
Я знаю, что это более старый вопрос, но я подумал, что выброшу решение, которое придумал. Ни один из плагинов gulp, которые я обнаружил, не сообщал бы мне о новых или переименованных файлах. Так что я закончил оборачивать монокль в удобную функцию.
Вот пример того, как эта функция используется:
watch({
root: config.src.root,
match: [{
when: 'js/**',
then: gulpStart('js')
}, {
when: '+(scss|css)/**',
then: gulpStart('css')
}, {
when: '+(fonts|img)/**',
then: gulpStart('assets')
}, {
when: '*.+(html|ejs)',
then: gulpStart('html')
}]
});
Я должен отметить, что gulpStart - также удобная функция, которую я сделал.
А вот актуальный модуль часов.
module.exports = function (options) {
var path = require('path'),
monocle = require('monocle'),
minimatch = require('minimatch');
var fullRoot = path.resolve(options.root);
function onFileChange (e) {
var relativePath = path.relative(fullRoot, e.fullPath);
options.match.some(function (match) {
var isMatch = minimatch(relativePath, match.when);
isMatch && match.then();
return isMatch;
});
}
monocle().watchDirectory({
root: options.root,
listener: onFileChange
});
};
Довольно просто, а? Все это можно найти в моем наборе для начинающих: https://github.com/chrisdavies/gulp_starter_kit
Важно отметить, что похоже, что gulp.watch сообщает только об измененных и удаленных файлах в Windows, но по умолчанию прослушивает новые и удаленные файлы в OSX:
Вы должны использовать "gulp-watch" для новых / переименованных / удаленных файлов вместо gulp.watch
var gulpwatch = require('gulp-watch');
var source = './assets',
destination = './dest';
gulp.task('copy-changed-assets', function() {
gulpwatch(source+'/**/*', function(obj){
gulp.src( obj.path, { "base": source})
.pipe(gulp.dest(destination));
});
});