标签: gulp-watch

我有这样的事情:

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

但它不起作用,因为它监视两个目录,sass和layouts目录进行更改.

如何让它工作,以便gulp监视那些目录中发生的任何事情？

我正在开发一个Gulpfile.一旦它改变就可以重新启动吗？我正在用CoffeeScript开发它.可以Gulp观看Gulpfile.coffee以便在保存更改时重新启动？

我对Gulp非常陌生.我基本上试图查看修改后的JavaScript文件,然后使用新名称创建它的新副本.(最终会有一些处理,但罗马不是一天建成的).

我(天真)的尝试是这样的:

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

    return gulp.watch('../**/**.js', function(obj){
        gulp.src(obj.path)
            .pipe(gulp.dest('foobar.js'));
    });

});

这将获取修改后的文件并成功将其复制到现在名为foobar.js的文件夹中.有什么简单的我可以替换gulp.dest('foobar.js'),只需复制和重命名src文件到位？

编辑

通过复制到位,我的意思是我想获取修改后的文件,并使用新名称将其复制到当前的位置.相当于单击文件(在Windows中)并按下control-c control-v,然后重命名生成的文件.

我正在尝试运行下面的命令,但不幸的是我遇到了错误.

$ gulp build

在我的终端,我得到这个断言错误.我已经卸载了节点和NPM并使用brew再次重新安装 - 如何完全卸载Node.js,并从头开始重新安装(Mac OS X).我的节点版本是v10.5.0,npm版本是6.1.0.

我的系统是MacOS High Sierra 10.13.2

assert.js:269
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (bulkit/startup-kit/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (startup-kit/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> 
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)

的package.json

{
    "name": "bulkit-startup",
    "version": "0.0.1",
    "description": "Bulkit Startup Kit",
    "main": "Gruntfile.js",
    "devDependencies": {
        "autoprefixer": "^6.3.6",
        "browser-sync": …

我有一个gulp文件中使用的当前gulp任务.路径来自config.json,一切都很完美:

//Some more code and vars...

gulp.task('watch', function() {
    gulp.watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], ['imagemin-cfg']);
})

//Some more code ...

gulp.task('imagemin-cfg', function () {
    return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
});

但我仍然有一个问题,我的项目中的图像数量很大,这项任务需要很长时间.我正在寻找一种方法来仅在修改过的文件上运行我的任务.如果我有一个图像或修改它,imagemin()将只在这个图像上运行,而不是在所有图像上运行.

一切都工作得很好,但运行时间真的很长.

谢谢.

我有gulp-ruby-sass的问题.当我尝试运行监视任务并更改一些.sass文件时,会发生错误:

TypeError: Arguments to path.join must be strings 

这是我的gulpfile.js

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-ruby-sass');
var watch = require('gulp-watch');

gulp.task('sass', function() {
    return gulp.src('sass/*.sass')
        .pipe(sass())
                .pipe(gulp.dest('./css'));

});
gulp.task('watch', function() {
    gulp.watch('./sass/*.sass', ['sass']);
})

我使用gulp-slash但它不起作用.

我一直在使用gulp-watch.当前版本的gulp-watch依赖于调用gulp.parrallel.此通话仅适用于gulp 4.

但是通过npm repo无法获得gulp 4. npm info gulp dist-tags回报:{ latest: '3.9.0' }.

我可以看到git repo中有一个4.0分支.但尝试使用此命令的变体安装它失败:npm install https://github.com/gulpjs/gulp#v4.0.0.

我有一个像变量

var files = {
    'foo.css': 'foo.min.css',
    'bar.css': 'bar.min.css',
};

我希望gulp为我做的是minify文件,然后rename是我.

但是这些任务目前写成(对于一个文件)

gulp.task('minify', function () {
    gulp.src('foo.css')
        .pipe(minify({keepBreaks: true}))
        .pipe(concat('foo.min.css'))
        .pipe(gulp.dest('./'))
});

如何重写所以它适用于我files上面定义的变量？

我正在使用这个Gulp Watch示例:https://github.com/floatdrop/gulp-watch/blob/master/docs/readme.md#starting-tasks-on-events.

var gulp = require('gulp');
var watch = require('gulp-watch');
var batch = require('gulp-batch');

gulp.task('build', function () { console.log('Working!'); });

gulp.task('watch', function () {
    watch('**/*.js', batch(function () {
        gulp.start('build');
    }));
});

当我在Windows 8机器上运行它时,它仅在我第一次更改文件时运行:

C:\test>gulp watch
[08:40:21] Using gulpfile C:\test\gulpfile.js
[08:40:21] Starting 'watch'...
[08:40:21] Finished 'watch' after 2.69 ms
[08:40:31] Starting 'build'...
Working!
[08:40:31] Finished 'build' after 261 µs

下次什么都没发生.为什么？

我已经定义了一些任务gulpfile.js,我想使用gulp-watch插件(在新文件上运行任务).我的问题是,因为我找不到任何东西,我可以在运行watch(来自插件)功能时运行我现有的任务吗？

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    ...;

gulp.task('lint', function () {
  return gulp.src(path.scripts)
      .pipe(jshint())
      .pipe(jshint.reporter(stylish));
});

gulp.task('watch', function () {
  watch({ glob: 'app/**/*.js' }); // Run 'lint' task for those files
});

因为我不想watch()在我的每项任务中都包含任务.我想只有一项任务 - 手表,它将结合所有"手表".

-----编辑----(因为我可能不太明白我的观点):

我需要从任务内部运行gulp('watch')任务.例如:

就像我做的那样gulp.watch:

gulp.task('watch', function () {
  gulp.watch('files', ['task1', 'task2']);
});

我需要做同样的事情,但有gulp-watch插件,类似的东西(我知道它不会起作用):

var watch = require('gulp-watch');

gulp.task('watch', function () {
  watch({ glob: 'files' }, ['task1', 'task2']);
});