cover

前言

我们在使用gulp压缩js、css过程中经常会使用压缩文件插件,但是一般每次只修改几个文件,这样执行压缩命令也会把所有文件压缩一遍,有没有办法每次只压缩修改过的文件呢?

watch方式

这种方式大概原理就是监控每个文件的变化,当有文件更改,会进入回调函数,然后你就可以在回调函数中处理这个文件 代码如下


var gulp = require('gulp');

gulp.task('watch', function () {
    gulp.watch('js/*.js', function (event) {
        var paths = require('gulp-watch-path')(event, 'js/', 'dist/js/');
        console.log(paths);

        gulp.src(paths.srcPath)
            .pipe(uglify())
            .pipe(gulp.dest(paths.distDir))
    })
});

changed插件方式

这种方式是利用changed插件实现每次全部压缩之前只有修改过的文件才会进入管道 代码如下


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

var src = 'js/*.js';
var dest = 'dist/js';

gulp.task('js', function () {
    return gulp.src(src)
    // `changed` 任务需要提前知道目标目录位置
    // 才能找出哪些文件是被修改过的
        .pipe(changed(dest))
        // 只有被更改过的文件才会通过这里
        .pipe(uglify())
        .pipe(gulp.dest(dest));
});

结语

我的项目结构如下:

  • 第一种方式需要你在你修改文件之前执行任务,它会一直监听文件变化,当有变化时候会自动修改
  • 第二种方式你所有文件修改完之后再执行即可
支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

杨少凡's Picture
杨少凡

全栈工程师,现居重庆,目前就职于人和集团电商部。

Chongqing「重庆」 http://shaofan.org