获取Gulp Watch仅在更改的文件上执行功能

uoifb46i 于 5个月前发布在 Gulp

关注(0)|答案(3)|浏览(66)

我是Gulp的新手，有以下Gulpfile

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

gulp.task('compress', function () {
    return gulp.src('js/*.js') // read all of the files that are in js with a .js extension
      .pipe(uglify()) // run uglify (for minification)
      .pipe(gulp.dest('dist/js')); // write to the dist/js file
});

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

    // watch for JS changes
    gulp.watch('js/*.js', function () {
        gulp.run('compress');
    });

});

字符串
我想将此配置为重命名，缩小和保存只有我更改的文件到dist文件夹。什么是最好的方法来做到这一点？

gulp

来源：https://stackoverflow.com/questions/28545843/get-gulp-watch-to-perform-function-only-on-changed-file

3条答案

按热度按时间

wgeznvg71#

这是如何：

// Watch for file updates
gulp.task('watch', function () {
    livereload.listen();

    // Javascript change + prints log in console
    gulp.watch('js/*.js').on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('JS changed' + ' (' + file.path + ')'));
    });

    // SASS/CSS change + prints log in console
    // On SASS change, call and run task 'sass'
    gulp.watch('sass/*.scss', ['sass']).on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('CSS changed' + ' (' + file.path + ')'));
    });

});

字符串
同样伟大的使用gulp-livereload与它，你需要安装Chrome plugin为它的工作顺便说一句。

赞(0）回复(0）举报 5个月前

yvt65v4c2#

参见Gulp文档上的增量构建。
可以使用gulp.src函数的since选项和gulp.lastRun过滤掉任务运行之间未更改的文件

赞(0）回复(0）举报 5个月前

htzpubme3#

这取决于你使用的是gulp 4.0.2还是3.9.1（下面两种解决方案）

如果使用gulp 4.0.2，则需要使用gulp.src函数的since选项和gulp.lastRun

const images = () => {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(paths.images.dest));
}

字符串
完整文档在这里

如果使用gulp 3.9.1* 我建议使用gulp-cached和gulp-remember-示例：

const gulp = require('gulp')
const cache = require('gulp-cached')
const cleanCSS = require('gulp-clean-css')
const remember = require('gulp-remember')
const sass = require('gulp-sass')(require('node-sass'))
const sourcemaps = require('gulp-sourcemaps')
// const tap = require('gulp-tap')
// const util = require('gulp-util')

gulp.task('scss', () => {
  return gulp.src(paths.scss.basic)
    // .pipe(tap(file => util.log('scss', file.path)))
    .pipe(cache('scss1')) // 81 FILES
    .pipe(sourcemaps.init())
    .pipe(remember('scss1')) // 81 FILES
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(cache('scss2')) // 10 FILES
    .pipe(cleanCSS())
    .pipe(remember('scss2')) // 10 FILES
    .pipe(sourcemaps.write('./'))
    .pipe(cache('scss3')) // 5 FILES
    .pipe(gulp.dest('./../../css'))
})

型
这是一个相当复杂的例子--通常gulp-cached只应该在流中有1：1Map的地方使用。但是，如果你有一个文件计数随着流的进展而改变（例如，当使用gulp-concat时），那么就将gulp-remember与gulp-cached结合使用。在上面的例子中，当有一个新的文件计数时使用gulp-cached，而在文件计数改变之前使用gulp-remember。如果你不知道流中不同地方的文件计数，那么就使用util.log来看看发生了什么。注意，该高速缓存名称会改变，该高速缓存和remember语句是按缓存名称配对的！
NB文件计数这里指的是缓存之前通过流的文件数量
其他gulp插件，试图做同样的事情，但不改善的事情，如果文件计数的变化是gulp-changed和gulp-newer。
NB gulp-changed支持gulp 3.9.1（[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)）和gulp 4.0.2（gulp-changed@latest）

赞(0）回复(0）举报 5个月前

我来回答

获取Gulp Watch仅在更改的文件上执行功能

3条答案

相关问题

热门标签

最新问答