gulp技巧总结

Posted 2020-10-26 mengff

1. gulp.dest 会自动创建目录

gulp.dest(dir)，若dir不存在，gulp会自动创建它

2. gulp.src copy具名路径(即不子目录**的路径)的文件，不会保留文件夹路径

gulp.src(‘static/user/user.js‘)
    .pipe(gulp.dest(‘dist));

gulp.src(‘static/*.js‘); //一级的*.xx文件也不会保留路径

如上，将user.js拷贝到dist，会形成如下结构

dist
　　user.js

若要保留路径，即形成

dist
　　static
　　　　user
　　　　　　user.js

需要添加base选项，如下：

gulp.src(‘static/user/user.js‘, {base:‘.‘})
    .pipe(gulp.dest(‘dist));
//或者使用通配符
gulp.src(‘static*/user*/user.js‘)
    .pipe(gulp.dest(‘dist));

3. gulp.src copy带有*的路径的文件，会保留文件夹路径

gulp.src(‘login/**/*.js‘)
    .pipe(gulp.dest(‘dist‘));

复制到dist的文件是带文件夹的

要解决这个问题，有如下方法：

1. gulp-flatten插件可以拍平文件结构

var gulp = require(‘gulp-flatten‘);
//转移图片并压缩
gulp.task(‘copy-images‘, function() {
    return gulp.src([‘./src/common/images/**/*‘])
        .pipe(flatten())
        .pipe(imagemin())
        .pipe(gulp.dest(‘./build/images‘));
});

2. gulp-rename插件可以修改文件路径和文件名

var gulp = require(‘gulp-rename‘);
//转移图片并压缩
gulp.task(‘copy-images‘, function() {
    return gulp.src([‘./src/common/images/**/*‘])
        .pipe(rename({dirname: ‘‘}))
        .pipe(imagemin())
        .pipe(gulp.dest(‘./build/images‘));
});