Question

我在gulpfile中使用了当前的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()只会在此图片上投放，而不是全部投放。

一切都工作得很好，但运行时间很长。

感谢。

Answer 1

“gulp-changed”不是这样做的最佳解决方案，因为它只在“buildType”文件夹中观看修改过的文件。

请尝试gulp-cached。

Answer 2

另一个选择是在（＆＃34;更改＆＃34;）选项上使用gulp.watch。

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });

Answer 3

使用gulp.watch，您可以像这样定位仅更改文件。

gulp.watch(["src/**/*"], function (obj) {
 return gulp.src(obj.path, {"base": "src/"})
 .pipe(gulp.dest("dest"));
});

编辑： for Gulp v4：

const { watch, src, dest } = require('gulp');

var watcher = watch(["src/**/*"]);
watcher.on('change', function(obj){
    return src(obj.path, {base: 'src/'})
        .pipe(dest('dest'));
});

Answer 4

我建议您gulp-newy在其中操作自己函数中的路径和文件名。然后，只需使用该函数作为newy()的回调。这使您可以完全控制要比较的文件。

这将允许1：1或多对1比较。

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

Answer 5

是的，gulp-changed正是如此：

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

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(changed(buildType))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest(buildType))
    .pipe(connect.reload());
});

Answer 6

从版本4.0开始，Gulp本机支持增量构建，而没有任何插件。以下是摘自project README的示例：

const paths = {
  ...
  images: {
    src: 'src/images/**/*.{jpg,jpeg,png}',
    dest: 'build/img/'
  }
}

function images() {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin())
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}

Answer 7

在任务或回调中，您将拥有一个事件参数，该参数具有type属性，该参数将告诉您文件是否已添加，删除或更改。最好的办法是在有条件的情况下利用它。

                var viewer = new Cesium.Viewer('cesiumContainer',{
                animation : false,
                homeButton : false,
                baseLayerPicker : true,
                infoBox : true,
                sceneModePicker : true,
                timeline : false,
                navigationInstructionsInitiallyVisible : false,
                navigationHelpButton : false,
                contextOptions: {
                    webgl:{preserveDrawingBuffer:true}
                },
                selectionIndicator : false,
            });
            var layers = viewer.imageryLayers;
            var baseLayer = layers.get(0);
            layers.remove(baseLayer);
            layers.addImageryProvider(new Cesium.MapboxImageryProvider({
                url : 'https://api.mapbox.com/v4/',
                mapId: 'mapbox.streets',
            }));

Answer 8

这是一个真实世界的例子，我一直用它来做这个，而不需要任何额外的包。我用它来缩小，重命名和编译js目录中的任何.js文件。编译后的文件将保存到dist目录中，并在扩展名之前附加.min。

// Compile JS
var compileJS = function( file ) {
    var currentDirectory = process.cwd() + '/';
    var modifiedFile = file.path.replace( currentDirectory, '' );

    gulp.src( modifiedFile )
        .pipe( uglify() )
        .pipe( rename( {
            suffix: ".min"
        } ) )
        .pipe( livereload() )
        .pipe( gulp.dest( 'dist' ) );
};

// Watch for changes
gulp.watch( 'js/*.js', [ 'js' ] ).on( "change", compileJS );

以上答案似乎部分不完整，对我来说有点不清楚，希望这对其他寻找基本范例的人都有帮助。

Answer 9

定义主要任务，使其接受.src()输入模式的参数。定义包装函数以传递任务的默认src值，以便您仍可以像gulp images一样直接调用它：

const imageFilePattern = '/src/path/to/input';

function images() {
  getImagesTask(imageFilePattern);
}

function imagesTask(src) {
  return gulp.src(src)
    .pipe(imagemin())
    .pipe(gulp.dest('dest'));
}

现在，您可以轻松定义监视任务以仅处理更改的文件：

function watch() {
  return gulp.watch(imageFilePattern).on("change", imagesTask);
}

如何使用Gulp手表仅在修改过的文件上运行任务

9 个答案: